webpack初览webpack

jiezi

5 年前

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

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

入口
输出
loader
插件

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

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

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

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

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'
  }
};

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

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

// 写入到硬盘：./dist/app.js, ./dist/search.js

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}
          }
        ]
      }
    ]
  }

实际上处理转译，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;

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

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

webpack初览webpack

webpack

概念

配置

入口[entry]

1. 单个入口

2. 对象语法

出口[output]

2. 多个入口起点

loader

插件[plugins]

模式[model]