webpack模板引用外部css,webpack4 模板配置及遇到的问题

讲在前面

最近在学习 webpack4 的相关知识，整理了一个 webpack4 的基础模板

学习 webpack4 的话最好的还是 指南 部分，直接看 配置 或者 API 越看越懵

初次接触建议按照指南走一遍

以下为遇到的一些问题及思考

webpack4 打包出来的东西都是什么，什么时候会打包出一个文件，什么时候会多个？

webpack 打包出的各种 js 文件大致分为两类，一种是 entry 字段指定的入口文件，此类文件打包的结果我们暂且叫做 bundle；除了前面说的，剩余的比如通用文件，外部文件，运行时等等，打包出的文件叫做 chunk

如何打包出多个文件 ？

entry: {

app: '../src/index.js',

print: '../src/js/print.js'

},

2、配置了 Optimization.splitChunks 字段后，会将 异步模块 和 通用模块 进行单独打包，这有个不错的文章

optimization: {

splitChunks: {

chunks: 'all'

},

},

什么是异步模块 ？

异步模块 也就是常说的 懒加载模块，是在打开页面时不去加载，通过某些行为才触发加载。比如用户点击按钮后才去获取 xxx.js

实现异步加载的方式有 两种：

一种是 webpack 提供的 require.ensure 方法，以下为异步引入 模块B，模块B 依赖于 模块A

...

require.ensure(["模块A"], function(require) {

var foo = require("模块B");

});

...

另一种是 ES2015 的 import() 语法

...

import('模块C')

...

什么是 treeshaking ？

我想要使用 lodash 中的 chunk 方法，但是直接导入 lodash 并打包显然很冗余，因为我就用 chunk 那个方法而已，多了没用。treeshaking 就负责帮你只引用 chunk，把多余的代码像摇树一样摇掉。

treeshaking 是基于 ES6 的 import 和 export 语法，我在实践中遇到了以下几个问题

1. 如下语法无效

import { chunk } from 'lodash'

lodash 模块不支持 ES6 写法，需要使用 lodash-es 模块

2. 参照官网使用 webpack.ProvidePlugin 的 treeshaking 写法无效

官网写法：

plugins: [

new webpack.ProvidePlugin({

- _: 'lodash'

+ join: ['lodash', 'join']

})

]

目前写法：

new webpack.ProvidePlugin({

_join: "lodash-es/join" // lodash/join 也可

})

3. treeshaking 在 development 模式下无效，production 下效果正常

4. 还有一种情况也会导致 treeshaking 无效。当你使用 babel 进行语法转换时， babel 有可能会将你的 import 语法进行了转换，而 treeshaking 是基于 import 语法的。你需要做的是把 babel 的配置文件 .babelrc 中添加如下字段 "modules":false

{

"presets": [

[

"env",

{

"modules": false,

}

]

]

}

PS：ES6 写法转换为 CommonJS、AMD 等规范的写法，false 就是保留 ES6 的 import 写法，不进行转换

通过标签方式引入图片无效 ？

通过标签方式引入图片，即便是只使用 html-loader 和 url-loader，依旧需要安装 file-loader

这是一段测试文字

ExtractTextWebpackPlugin 无效 ？

index.js 中导入的 css 时，如果使用 3.0.2 这个版本会有问题，需要使用最新的

npm i -D extract-text-webpack-plugin@next

devtool:"cheap-module-source-map" 会 单独提出 .map 文件；其他的方法，比如："cheap-module-eval-source-map" 会将 source-map 映射 合并 在打包文件中，而 source-map 的映射与某个方法是否被调用无关，因此当映射被合并在 bundle 中时，搜索方法依旧会被搜索到，只不过是在 source-map 的映射中。

cheap-module-source-map

cheap-module-eval-source-map

开发环境建议：cheap-module-eval-source-map

生产环境建议：cheap-module-source-map

考虑清楚你需不需要这玩意，不需要索性就关掉这个功能 devtool: 'none'

关于 library 相关字段

比如我自己写了个 library，想打包成支持 AMD，CommonJS，import 等多种方式引用

libraryTarget 设置成通用模块规范

module.exports = {

mode:"production",

output: {

library: "MyModule",

libraryTarget: "umd"

}

}

使用 RequireJS 引入的话：

require(['dist/main.js'], function (factory) {

factory()

})

// 如果不引入 RequireJS , 可以在全局中找 MyModule

// console.log(MyModule)

避免 import / export，require / module.exports 混写

import 不能与 module.exports 搭配

require 可以与 export 搭配

总之不要混写

其他注意事项

less-loader 将 less 转换为 css

css-loader 以 import 方式引入 css

style-loader 将 css 作为标签插入

url-loader 可以限制大小一定的图片装换为 base64

多页面配置

optimization.splitChunks

提取公共部分1

提取公共部分2

module chunk bundle

image.png

image.png

path.join 和 path.resolve

1.join 是把各个 path 片段连接在一起， resolve 把／当成根目录

path.join('/a', '/b');

// /a/b

path.resolve('/a', '/b');

// /b

2.resolve 在传入非/路径时，会自动加上当前目录形成一个绝对路径，而 join 仅仅用于路径拼接

// 当前路径为

/Users/xiao/work/test

path.join('a', 'b', '..', 'd');

// a/d

path.resolve('a', 'b', '..', 'd');

// /Users/xiao/work/test/a/d

自动刷新，热更新：一个是刷新(状态会丢失)，一个是即时更新

常用插件

webpack.DefinePlugin 定义变量

CleanWebpackPlugin 清空打包路径

mini-css-extract-plugin 只用于生产环境抽离 css，即样式不在 style 标签内

loader 配置

plugins 配置

optimization 配置

happyPack 多进程打包

happyPack1

happyPack2

ParallelUglifyPlugin 多进程压缩 js 代码

plugins

DllPlugin 用于将不常更新的包预打包以便今后直接引用

优化

优化 babel-loader

image.png

公共代码抽离 splitChunks

名字中携带 hash 以便命中缓存

多进程打包 happyPack 和代码压缩

小图片 base64

懒加载

CDN