[webpack]初览webpack - HelloWorld开发者社区

webpack

概念

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

配置

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

入口
输出
loader
插件

入口[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'
};