移动端开发系列文章-webpack

webpack 打包工具

安装 webpack

安装 webpack

$ npm install webpack -g

查看 webpack 版本信息
```
$ npm info webpack
```
检测是否已经安装 webpack
```
$ webpack -h
```

使用 webpack - 只有一个 js 文件时

webpack 只能编译js文件，其他则需要使用loader。

创建一个空目录，添加一个html页面，一个js文件。如下：

<!-- html 页面 index.html -->
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

// js 文件 entry.js
document.write("It works.");

执行命令：

$ webpack ./entry.js bundle.js

这时，webpack把entry js编译打包到bundle js中，index.html页面引用 bundle，即可展示 entry 里的内容: It works.

使用 webpack - 多个 js 文件时

// content.js 第二个js文件
module.exports = "It works from content.js.";

// entry.js
document.write(require("./content.js"));

执行命令：

$ webpack ./entry.js bundle.js

此刻，index.html 展示：It works from content.js.

当依赖 css 文件时，需要启用 loader

webpack 只能编译js文件，其他则需要使用loader。

添加css文件：

/* style.css */
body {
    background: yellow;
}

// entry.js
require("!style!css!./style.css");
document.write(require("./content.js"));

编译前需要确保css-loader 和 style-loader 已安装到本路径下。

npm install css-loader style-loader

好奇怪的写法：require("!style!css!./style.css");

其实是绑定 loader。

// entry.js
require("./style.css");
document.write(require("./content.js"));

然后执行命令：

webpack ./entry.js bundle.js --module-bind 'css=style!css'

有时可能需要双引号哦：–module-bind “css=style!css”

综上，来个配置文件吧！

// webpack.config.js
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

把引用的 js 和 css 文件都放在html文件后，执行：webpack。

让输出有节奏感~

webpack --progress --colors

即写即现的方式

webpack --progress --colors --watch

开启一个服务器端: localhost:8080

npm install webpack-dev-server -g

安装完 WDS 后，运行下命令，启用服务~

webpack-dev-server

hanyuxinting / Blog

移动端开发系列文章-webpack #4