webpack学习笔记(3)--webpack.config.js

module 参数

使用下面的实例来说明

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

上配置中，对module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.css' 的路径」时，在你对它打包之前，先使用 css-loader 转换一下。
嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.ts' 的路径」时，在你对它打包之前，先使用 ts-loader 转换一下。

loader 作为开箱即用的自带特性，webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效模块，然后添加到依赖图中，这样就可以提供给应用程序使用。

loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能

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

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

plugins 参数

loader只能用于转换类型的模块,插件的功能更强大,包括

1打包优化

2资源管理

3注入环境变量

如下webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack'); // 引入 webpack 便于调用其内置插件

module.exports = {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true, // 告诉 dev-server 我们在用 HMR
    hotOnly: true // 指定如果热加载失败了禁止刷新页面 (这是 webpack 的默认行为)，这样便于我们知道失败是因为何种错误
  },
  // entry: './src/index.js',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  output: {
    // filename: 'bundle.js',
    // filename: '[name].bundle.js',
    filename: process.env.NODE_ENV === 'production' ? '[name].[chunkhash].js' : '[name].bundle.js', // 在配置文件中使用`process.env.NODE_ENV`
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      filename: 'index.html'
    }),
    new CleanWebpackPlugin(['dist']), 
    // new webpack.HotModuleReplacementPlugin(), // 关闭 HMR 功能
    new webpack.NamedModulesPlugin()
  ],
  // ...
};

我想使用一个html的一个插件
先将插件通过npm进行安装
然后require进入配置,添加到plugins中,最后通过使用 new 操作符来创建它的一个实例。
在上面的示例中，html-webpack-plugin 会为你的应用程序生成一个title为webpack demo名称为index.html 文件，然后自动注入所有生成的 bundle。

插件CleanWebpackPlugin在require之后,在plugins中初始化之后,会清理指定目录的字符串数字
插件NamedModulesPlugin的功能:打印日志信息时 webpack 默认使用模块的数字 ID 指代模块，不便于 debug，这个插件可以将其替换为模块的真实路径
想了解更多的插件可以参考这个网址:
https://webpack.docschina.org/plugins