webpack 5 汇总(一)

我爱小熊
148 阅读4分钟

webpack 作用：

  • 转换es6语法
  • 转换jsx,指令
  • css前缀补全/预处理器
  • 压缩混淆
  • 图片压缩 选择 webpack 原因：
  • 周下载量大，star数量多
  • 社区活跃
  • 配置灵活
  • 插件多
  • 更新快 npm 知识点：

使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。

  • .node_modules/.bin/webpack
  • npx webpack
  • package.json 中scripts可配置软链“build”：‘webpack’

loaders

webpack 开箱即用只支持js 和json两种文件类型，通过 loaders 去支持其他文件类型并把它们转换成有效模块，并且可以添加到依赖图中.loaders 本身是一个函数，接收源文件作为参数，输出结果

  • babel-loader:转换es6,es7
  • css-loader:加载css，转换成 commomjs
  • less-loader:less转css
  • style-loader:把 style 标签插入到head 标签中
  • ts-loader：ts 转 js
  • file-loader：图片字体富媒体
  • raw-loader：文件转文字
  • thread-loader 多进程打包 js 和css,webpack 默认为单进程

plugins

插件用于 bundle 文件的优化，资源管理和环境变量注入，作用于整个构建过程，loaders做不了的可以交给plugins

  • CommonsChunkplugin：chunks 相同的模块提取成公共 js
  • CleanWebpackPlugin：清理构建目录
  • MiniCssExtractPlugin：为每个包含 CSS 的 JS 文件创建一个 CSS 文件
  • CopyWebpackPlugin： 将文件或者文件夹复制到构建的目录
  • HtmlWebpackPlugin： 生成 html文件去承载输出的 bundle
  • UglifyjsWebpackPlugin： 压缩 js
  • ZipWebpackPlugin： 打包出的资源生成一个 zip包

mode

  • mode development,process.env.NODE_ENV 是 development，默认会开启一些开发相关插件
  • mode production,process.env.NODE_ENV 是 production ，默认会开启一些生产相关插件
  • mode none没有任何优化选项

缓存

文件指纹：版本管理，没有修改的缓存

  • Hash：代表的是 compilation 的 hash 值，compilation在项目中任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值
  • chunkhash: 三个js文件任何一个改动都会影响另外两个文件的最终文件名。上线后，另外两个文件的浏览器缓存也全部失效。这肯定不是我们想要的结果。根据chunkhash的定义知道，chunkhash是根据具体模块文件的内容计算所得的hash值，所以某个文件的改动只会影响它本身的hash指纹，不会影响其他文件。
  • contenthash:webpack将style视为js的一部分，所以在计算chunkhash时，会把所有的js代码和style代码混合在一起计算。webpack计算chunkhash时，以main.js文件为编译入口，整个chunk的内容会将main.scss的内容也计算在内。所以，不论是修改了js代码还是scss代码，整个chunk的内容都改变了，计算所得的chunkhash自然就不同了。使用extract-text-webpack-plugin单独编译输出css文件，可以使用 contenthash ，contenthash 只跟文件内容有关，例如css文件
  1. [hash]
  3. [contenthash]
  5. [folder]
  6. [path]

应用场景

解析es6

安装 babel-loader @babel/core @babel/preset-env

解析 jsx

@babel/preset-react react react-dom

j解析 css

style-loader css-loader,注意顺序，从右边开始解析

less

style-loader css-loader,less-loader 注意顺序，从右边开始解析

图片

file-loader 或者 url-loader 相比file-loader，可设置base64

字体

file-loader 或者 url-loader 写 demo时 遇到点问题

监听文件变化：

文件修改后，需要手动刷新浏览器

watch:true,
watchOptions:{
    ignored:/node_modules/,
    aggregateTimeout:300, //监听到变化后会等300ms再去执行
    poll:1000 //判断文件是否发生变化 是通过不断轮询去检测文件是否变化实现的，默认每秒1000次
}

热更新

webpack-dev-server

注意：修改后的内容更新到内存中，不会更新到打包目录中

package.json 中配置"serve":"webpack-dev-server --open --config webpack.dev.js",

webpack.dev.js 中配置

devServer: {
    server:"http",
    static: "./dist",
    // hot:true //无需配置，默认是true
},

webpack-dev-middleware

middleware 将输出的文件给服务器

没有实现，记录一下，以便将来填坑

const app = express()
const config = require("./webpack.dev.js")
const webpack = require('webpack')
const middleware = require('webpack-dev-middleware')
const port = 3000

const compiler = webpack(config)
app.use(middleware(compiler,{publicPath: config.output.path}))
app.use(express.static(config.output.path))
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

压缩

js:uglifyjs-webpack-plugin,webpack 4+内置，不用额外配置 html：html-webpack-plugin

plugins:[
    new HtmlWebpackPlugin({
        filename:"index.html",// 打包后的文件名
        template:path.resolve(__dirname, 'src/index.html'), // 需要打包的文件，多个 html 文件需要设置多个
        inject:true, //是否注入 js,css
        chunks:['index','search'],// 依赖的块，entry 中的键
        minify:true // 清除空格，换行，注释等
    })
],

HtmlWebpackPlugin 也可以不配置任何东西，会在打包目录中默认生成 html 文件

css:mini-css-extract-plugin

不仅可以压缩 css,还可以为 chunks(entry中的入口) 单独生成一个 css 文件

plugins:[
    new MiniCssExtractPlugin()
],

样式兼容

css3 添加前缀是因为标准没有统一

浏览器IE火狐谷歌opera
内核Trident(-ms)Geko(-moz)Geko(-moz)Presto(-o)
安装 postcss-loader autoprefixer
module:{
    rules:[{
        test: /\.less$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader, // 会抽出一个单独的 css 文件，所以 style-loader 不需要，因为 style-loader 是在 head 中插入 style
                options: {
                    publicPath: "./dist",
                },
            },'css-loader',"less-loader",
            {
                loader:'postcss-loader',
                options: {
                    postcssOptions:{
                        plugins: [
                            autoprefixer({
                                overrideBrowserslist: [
                                      'last 10 Chrome versions',
                                      'last 5 Firefox versions',
                                      'Safari >= 6', 
                                      'ie> 8'
                                 ] 
                            }),
                        ]
                    }
                  }
            }]
        },

webpack5 知识点汇总，只是为了记录，希望可以得到大家的批评指正，自己也会不定期更新

avatar
文章
阅读
粉丝