Webpack3全面解析

一、基本概念

Webpack是一个模块打包器，通过构建一个依赖关系图，将所有需要的资源打包成一个或多个bundle文件，提供给浏览器使用。其中模块可以是JavaScript文件、CSS文件、图片等等任何形式的资源。

Webpack的核心是一些如loader、plugin等的插件模块，可以进行预处理、压缩、转换、跨域等等各种复杂的操作。

二、使用步骤

1. 安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

2. 编写webpack.config.js文件

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3. 运行webpack打包

npx webpack

三、devtool

devtool属性可以控制打包后的代码的调试工具，是调试时一个非常重要的参数。

1. source-map

生成一个source-map文件，可以在浏览器中直接进行调试，打包时速度会比较慢。

module.exports = {
  devtool: 'source-map'
};

2. cheap-source-map

生成一个压缩之后的source-map文件，速度比较快。

module.exports = {
  devtool: 'cheap-source-map'
};

3. eval-source-map

生成一个source-map code URL，速度最快，但是可能有安全问题。

module.exports = {
  devtool: 'eval-source-map'
};

四、loader和plugin

1. loader

通过loader模块，我们可以对各种类型的文件进行处理。比如对于CSS文件，我们可以使用css-loader进行处理，将其转化为JavaScript代码，再使用style-loader插入到html中。

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

2. plugin

Plugin在Webpack构建过程中会广泛应用，一个Plugin的功能往往会涉及到Webpack自身的多个生命周期。比如，我们可以用uglifyjs-webpack-plugin来进行代码压缩。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
};

五、代码分离

Webpack可以将代码分成多个块，每一个块被打成一个文件。

1. entry

在entry中配置多个入口，每个入口都会生成一个chunk。

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

2. optimization.splitChunks

通过optimization.splitChunks配置可以实现更高级的代码分离。具体来说，它可以将多个入口chunk中的公共部分提取出来，生成一个单独的chunk文件。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async'
    }
  }
};

六、Hot Module Replacement

Hot Module Replacement可以在不刷新浏览器的情况下，自动替换页面上的已经被修改的模块。

const webpack = require('webpack');

module.exports = {
  devServer: {
    hot: true,
    contentBase: './dist'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

七、结语

Webpack3是一个非常强大的模块打包工具，通过熟练掌握Webpack3的各种配置、loader、plugin等模块，可以轻松构建出高质量的前端项目。