Webpack

前端

字数统计: 512阅读时长: 2 min

 2022/10/16 

一些Webpack相关的笔记

entry & output

entry

用于指定使用的模块，默认值为’./src’
数据类型：string | Array<string>；单入口就是一个字符串值路径，多入口要用字符串数组的结构。

多页面的入口，可以使用 CommonsChunkPlugin 插件打包页面间的共享代码。

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

output

filename 属性为文件名，path 属性为绝对路径

const path = require("path")
module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, "../dist"),
  }
};

若是多入口则要使用占位符来确保文件名字的唯一性，也可以使用hash或者CDN的方法
1
2
filename: '[name].js' // 占位符
filename: "scripts/[name].[contenthash:5].js" // hash

loader

用法

Webpack自身只能处理JavaScript，但是通过 loader 就可以处理任何类型的文件

在 module 对象里定义 rules 属性，包含了两个必须属性：
1.test：标识要被转换的文件
2.use：转换时使用哪个loader，可以指定多个

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

常用的loader_use

如下

1 2	npm install --save-dev css-loader //加载css文件 npm install --save-dev ts-loader //将TypeScript转为JavaScript

plugins

插件，具有 apply 属性的 JavaScript 对象。apply 属性会被编译器调用，并且编译的对象可以在整个编译生命周期访问。
解决 loader 无法实现的其他事。如果要使用一个插件，就 require 该插件，然后添加到 plugins 属性中。

可以携带参数，必须在配置中向 plugins 属性传入 new 实例

const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

mode

在最后导出config的时候，可以选择mode参数，可以选择production或者development；不同的参数可以告诉webpack使用对应模式下的内置优化。
1
2
3
module.export = {
mode: 'production'
};

Next Post

Refs and the DOM
Previous Post

七月的最后一个周末

CATALOG

1. entry & output
1. 1.0.1. entry
2. 1.0.2. output

2. loader

2.0.1. 用法
2.0.2. 常用的loader_use

3. plugins

4. mode