关于webpack:webpack打包相关

browserify：用于将CommonJS编译之后能够在浏览器端应用

一、mode

开发环境mode:'development'
生产环境mode:'production'

二、entry

entry: 入口终点

string –> './src/index.js'
单入口
打包造成一个chunk。输入一个bundle文件。
此时chunk的名称默认是 main
array –> ['./src/index.js', './src/add.js']
多入口
所有入口文件最终只会造成一个chunk, 输入进来只有一个bundle文件。
–> 只有在HMR性能中让html热更新失效~
object
多入口
有几个入口文件就造成几个chunk，输入几个bundle文件
此时chunk的名称是 key
–> 非凡用法

        {
          // 所有入口文件最终只会造成一个chunk, 输入进来只有一个bundle文件。
          index: ['./src/index.js', './src/count.js'], 
          // 造成一个chunk，输入一个bundle文件。
          add: './src/add.js'
        }

三、output

output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输入文件目录（未来所有资源输入的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共门路前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library: '[name]', // 整个库向外裸露的变量名
    // libraryTarget: 'window' // 变量名增加到哪个上 browser
    // libraryTarget: 'global' // 变量名增加到哪个上 node
    // libraryTarget: 'commonjs'
  },

filename与缓存

hash，webpack每次打包都会生成新的hash值
chunkhash，依据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样
contenthash，依据文件的内容生成hash值，不同文件的hash值肯定不一样

四、loader

webpack只能解决js和json文件，其余类型文件须要loader进行编译转换成webpack可辨认的文件

1. 解决款式文件，css、less、sass等

style-loader:创立style标签，将js中的款式资源插入进行，增加到head中失效
css-loader:将css文件编译成commonjs模块加载js中，外面内容是款式字符串
less-loader:将less文件编译成css文件
sass-loader:将sass文件编译成css文件

生产环境解决款式文件

(1) 提取css成独自文件
MiniCssExtractPlugin:应用MiniCssExtractPlugin.loader代替style-loader，style-loader内置了HMR性能，所以开发环境还用style-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

(2) css兼容性解决
postcss，postcss-loader，postcss能够在webpack中配置也能够在postcss.config.js中配置。
postcss兼容的罕用插件autoprefixer、postcss-preset-env
browserslist浏览器列表配置，能够在package.json中配置browserslist，也能够在.browserslistrc配置

(3) 压缩css
webpack5以前的版本应用optimize-css-assets-webpack-plugin
webpack5及当前的版本应用css-minimizer-webpack-plugin

2. 解决图片资源

url-loader:基于file-loader，减少base64解决
html-loader:解决html文件中的img图片（负责引入img，从而能被url-loader进行解决）

3. 解决字体资源以及其余资源

file-loader

4. 解决js

(1) js语法查看

eslint-loader(已过期，请应用eslint-webpack-plugin)、eslint(详见https://segmentfault.com/a/11…)

(2) js兼容

babel-loader（反对缓存）
@babel/cli @babel/core（按需加载polyfill）详见babel转码器
@babel/preset-env
@babel/polyfill（已过期，整体加载体积太大）

(3)js压缩

只须要将mode设置为production，js代码会主动压缩

五、resolve

resolve: {
    // 配置解析模块门路别名: 长处简写门路 毛病门路没有提醒
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件门路的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 通知 webpack 解析模块是去找哪个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }

六、devServer

开发环境应用，主动编译，主动关上浏览器，主动刷新浏览器。
设置hot:true开启HMR（模块热替换），一个模块发生变化，只会从新打包这一个模块，而不是打包所有模块，晋升构建速度。

款式文件应用style-loader就能够应用HMR性能
js文件须要在js中批改代码，只能解决非入口js文件的其余文件

if (module.hot) {
   module.hot.accept('./print.js', function() {
     console.log('Accepting the updated printMe module!');
     printMe();
   })
 }

七、devtool

提供源代码与构建后的代码的映射。分两大类：

内联，把映射关系嵌套到js文件中
内部，独自生成一个映射文件，生产环境不必内联，而且应该暗藏源码

八、externals

避免将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从内部获取这些扩大依赖(external dependencies)。
例如，从 CDN 引入 jQuery，而不是把它打包

九、生产环境优化

1.解决并压缩html

html-webpack-plugin

2.缓存

应用babel-loader进行babel缓存，cacheDirectory: true，让第二次打包构建速度更快
文件资源缓存output里的filename应用contenthash

3.treeShaking：去除无用代码

前提：1. 必须应用ES6模块化 2. 开启production环境
在package.json中配置

  "sideEffects": false 所有代码都没有副作用（都能够进行tree shaking）
    问题：可能会把css / @babel/polyfill （副作用）文件去掉
  "sideEffects": ["*.css", "*.less"]

4.codesplit

(1) 应用splitChunks

能够将node_modules中代码独自打包一个chunk最终输入
主动剖析多入口chunk中，有没有公共的文件。如果有会打包成独自一个chunk

module.exports = {
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

(2) 应用import动静导入语法，能将某个文件独自打包成一个chunk

import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

5.懒加载

应用import动静导入语法进行懒加载

6.dll

应用dll技术，对某些库（第三方库：jquery、react、vue…）进行独自打包
当你运行 webpack 时，默认查找 webpack.config.js 配置文件
在webpack.dll.js 文件中配置须要独自打包的库，DllPlugin 和 DllReferencePlugin 配合应用

关于webpack:webpack打包相关

一、mode

二、entry

三、output

filename与缓存

四、loader

1. 解决款式文件，css、less、sass等

生产环境解决款式文件

2. 解决图片资源

3. 解决字体资源以及其余资源

4. 解决js

(1) js语法查看

(2) js兼容

(3)js压缩

五、resolve

六、devServer

七、devtool

八、externals

九、生产环境优化

1.解决并压缩html

2.缓存

3.treeShaking：去除无用代码

4.codesplit

(1) 应用splitChunks

(2) 应用import动静导入语法，能将某个文件独自打包成一个chunk

5.懒加载

6.dll

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于webpack:webpack打包相关

一、mode

二、entry

三、output

filename与缓存

四、loader

1. 解决款式文件，css、less、sass等

生产环境解决款式文件

2. 解决图片资源

3. 解决字体资源以及其余资源

4. 解决js

(1) js语法查看

(2) js兼容

(3)js压缩

五、resolve

六、devServer

七、devtool

八、externals

九、生产环境优化

1.解决并压缩html

2.缓存

3.treeShaking：去除无用代码

4.codesplit

(1) 应用splitChunks

(2) 应用import动静导入语法，能将某个文件独自打包成一个chunk

5.懒加载

6.dll

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复