Webpack 入门

Tip:

本文所有示例基于 webpack2。

文中的示例代码说明可以参考：

安装

本地安装

$ npm install --save-dev webpack$ npm install --save-dev webpack@

如果你在项目中使用了 npm ，npm 首先会在本地模块中寻找 webpack。这是一个实用的小技巧。

"scripts": {    "start": "webpack --config mywebpack.config.js"}

上面是 npm 的标准配置，也是我们推荐的实践。

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

全局安装

$ npm install --global webpack

webpack 命令现在可以全局执行了。

创建一个 bundle 文件

创建一个 app/index.js 文件。

document.write('Hello World
');

创建一个 index.html 文件。

执行命令

$ webpack ./app/index.js ./dist/bundle.js

这条命令的第一个参数为输入文件，第二个参数为输出文件。

会在目录下生成一个 dist/bundle.js 文件，它已打包所需的所有代码的输出文件。

在浏览器中打开 index.html 文件。

完整示例： ()

webpack.config.js

webpack.config.js 为 webpack 默认的配置文件，当执行 webpack 命令时，webpack 会在当前目录下自动搜索 webpack.config.js 文件。

单入口(Entry)

基于 () 的代码，新建一个 webpack.config.js 文件，内容如下：

const path = require('path');module.exports = {  // 这里应用程序开始执行  // webpack 开始打包  entry: "./app/index.js",  // webpack 如何输出结果的相关选项  output: {    // 所有输出文件的目标路径    // 必须是绝对路径（使用 Node.js 的 path 模块）    path: path.resolve(__dirname, "dist"),    // 「入口分块(entry chunk)」的文件名模板（出口分块？）    filename: "bundle.js",  }};

执行命令

$ webpack

在浏览器中打开 index.html 文件。

完整示例： ()

多入口(Entry)

如果有多个入口文件怎么办？很简单，我们来看一个示例：

新建 app/about.js 文件

document.write('ABOUT
');

新建 app/home.js 文件

document.write('HOME
');

新建 index.html 文件

新建 webpack.config.js 文件

const path = require('path');module.exports = {  // 这里应用程序开始执行  // webpack 开始打包  // 本例中 entry 为多入口  entry: {    home: './app/home.js',    about: './app/about.js'  },  // webpack 如何输出结果的相关选项  output: {    // 所有输出文件的目标路径    // 必须是绝对路径（使用 Node.js 的 path 模块）    path: path.resolve(__dirname, "dist"),    // 「入口分块(entry chunk)」的文件名模板（出口分块？）    // filename: "bundle.js", // 用于多个入口点(entry point)（出口点？）    filename: "[name].js", // 用于多个入口点(entry point)（出口点？）    // filename: "[chunkhash].js", // 用于长效缓存    // filename: "[name].[chunkhash].js", // 用于长效缓存  }};

执行命令