webpack

概念

webpack 是一个打包工具。工作中很多时候因为时间关系，我们都有自己的任务，webpack配置的工作一般都是老大来解决。可是为了提高自己的竞争力，我觉得还是要抽时间来认真了解一下wepack。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

配置

webpack需要别人告诉它要怎么做，也就是配置。一般写在webpack.config.js中。配置项中最重要的有四大项：

  1. 入口
  2. 输出
  3. loader
  4. 插件

入口[entry]

入口是webpack读取文件的起点，他会进入入口然后根据依赖关系，找到用到的文件，处理打包。最终输出到bundles文件。

1.单个入口

module.exports = {    // 指定入口  entry: './path/to/my/entry/file.js'};module.exports = {    // 指定入口  entry: {    main: './path/to/my/entry/file.js'  }};

2.对象语法

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

const config = {  entry: {    app: './src/app.js',    vendors: './src/vendors.js'  }};

出口[output]

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

const path = require('path');module.exports = {  entry: './path/to/my/entry/file.js',  output: {      // 输出路径    path: path.resolve(__dirname, 'dist'),    // 输出文件名    filename: 'my-first-webpack.bundle.js'  }};

2. 多个入口起点

假如入口配置了多个，出口要用占位符[name]来辨别输出的文件。

{  entry: {    app: './src/app.js',    search: './src/search.js'  },  output: {    filename: '[name].js',    path: __dirname + '/dist'  }}// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

webpack 自身只理解 JavaScript,可是实际中我们会需要处理很多别的文件，如css,less,vue等等。这就是需要用loader。它是把这些文件转译成webpack能理解的文件。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

const path = require('path');const config = {  output: {    filename: 'my-first-webpack.bundle.js'  },  module: {      // 定义了一个模块 test和use是必须的配置。它告诉webpack遇到txt后缀文件，先用raw-loader处理一下。    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  }};module.exports = config;

当中raw-loader需要自己下载。

npm install --save-dev raw-loader

loader的使用方式有三种。配置，内联，cli。当中配置是最直观明显的。loader还可以在配置中指定多个 loader。

  module: {    rules: [      {        test: /\.css$/,        use: [          { loader: 'style-loader' },          {            loader: 'css-loader',            options: {              modules: true            }          }        ]      }    ]  }

插件[plugins]

实际上处理转译，webpack还需要实现打包，压缩等各种功能。这就要用到插件了。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 用于访问内置插件const config = {  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  },  plugins: [    new HtmlWebpackPlugin({template: './src/index.html'})  ]};module.exports = config;s

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装const webpack = require('webpack'); //访问内置的插件const path = require('path');const config = {  entry: './path/to/my/entry/file.js',  output: {    filename: 'my-first-webpack.bundle.js',    path: path.resolve(__dirname, 'dist')  },  module: {    rules: [      {        test: /\.(js|jsx)$/,        use: 'babel-loader'      }    ]  },  plugins: [    new webpack.optimize.UglifyJsPlugin(),    new HtmlWebpackPlugin({template: './src/index.html'})  ]};module.exports = config;

模式[model]

通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化

module.exports = {  mode: 'production'};