webpack小白学习之路（一）

入口【entry】

标识使用模块的入口

// webpack.config.js
module.exports = {
  entry: './.../xxx.js'
};

出口【output】

标识输出所创建bundles的位置、命名

// webpack.config.js
const path = require('path') // 操作文件路劲

module.export = {
entry: './.../xxx.js'
output: {
  path:path.resolve(_dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'，
  ... // 更多属性可以看官方文档
  }
}

引入的path模块：一个 Node.js 核心模块，用于操作文件路劲

loader【加载器】

处理非JavaScript 文件，将其转化为 webpack 能够处理的有效模块。

在更高层面，在 webpack 的配置中 loader 有两个目标：

1、test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2、use 属性，表示进行转换时，应该使用哪个 loader。

// webpack.config.js
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.txt$/, 
        use: 'raw-loader',
        ... // 更多属性请参考官方文档
     }
    ]
  }
};

// 以上 rules 代码等于：“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

module.exports = config;

插件【plugins】

可以用于执行范围更广的任务。打包优化 => 压缩 => 重新定义环境中的变量

使用：require() 该插件，然后再 plugins 数组中添加，多个插件可用 options 定义
备注： 你也可以多次使用同一个插件，只需 new 创建一个它的实例

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装，此处引入，下面 plugins 声明
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }) // { template: './src/index.html' } 为该插件特定的配置
  ]
};

module.exports = config;

模式

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

module.exports = {
  mode: 'production'
}