webpack介绍

webpack是一个优秀的静态模块打包工具，它可以递归地构建出依赖关系，将所有模块打包成一个或多个bundle。

webpack

1. 安装

要使用webpack需要安装：

npm install --save-dev webpack

如果使用4.+版本还需要安装：

npm install --save-dev webpack-cli

建议本地安装，本地安装完成后直接使用node_modules/.bin/webpack访问webpack程序。

2. 配置

webpack的配置使用js编写，默认名字为webpack.config.js。一个简单的配置如下：

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

任何一个配置文件必需的两个字段包括：

• 入口（entry），即webpack根据这个入口建立依赖关系；
• 输出（output），处理后的bundle。
  模式（mode）告诉webpack如何优化。目前可以选择的有development、production，该参数也可以通过命令行传递：webpack --mode=production。开发和生产模式，webpack会对代码做不同的优化策略。

以上是一个单入口的例子，也可以写成:

entry: {
  main: './path/to/my/entry/file.js'
}

webpack也支持多入口方式：

entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
},
output: {
  filename: '[name].js',
  path: __dirname + '/dist'
}

3. loader处理非js文件

webpack本身只能处理javascript文件，其他文件需要借助loader来处理，loader可以将其他类型文件转换为webpack能处理的模块。loader有两个字段test、use，test表示匹配哪些文件做转换，use表示使用哪个loader：

const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

例如，我们可以使用css-loader、style-loader和ts-loader处理css和typescript文件：

npm install --save-dev css-loader style-loader ts-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['css-loader', 'style-loader'] },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

4. 插件

插件对于webpack很重要，webpack本身也是构建在插件上的。我们可以使用插件完成很多工作。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
...
plugins: [
        new HtmlWebpackPlugin({
            title: 'test',
            filename: 'index.html',
            template: path.resolve(__dirname, 'src/index.html'),
            inject: 'body'
        }),
    ],
...
}

要使用一个插件，在webpack中new一个实例并传入参数即可。如上所示，使用html-webpack-plugin插件。