webpack入门4----优化环境配置（下）

项目内容上传到了  码云 https://gitee.com/a2547944268/webpack_test上，下面的内容对照着代码的话，可能更清晰。

6.code split 

主要是两个位置：入口拆分代码及将node_modules中代码单独打包成一个chunk输出

代码分割的目的：提高代码运行速度

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/js/index.js',
        test: './src/js/test.js'
    },
    output: {
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    /*
    将代码分割成多个js文件
      1.可以将node_modules中代码单独打包成一个chunk最终输出
      2.自动分析多入口文件chunk中，有没有公共的文件，如果有会打包一个chunk
    */ 
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    mode: 'production',
};

7.lazy loading

具体看gitee上拉下来的代码，因为这个没有在webpack.config.js内配置，是在代码内进行配置的，所以只写代码内配置

在触发什么条件的时候，然后再加载一些文件

document.getElementById('btn').onclick = function(){
    // 先进行了代码分割，然后进行了懒加载
    // 懒加载：文件使用时才加载
    // 预加载prefetch：会在使用前加载js文件
    // 正常加载可以认为是并行加载（同一时间加载多个文件）   
    // 预加载prefetch：等其他资源加载完毕，浏览器加载完成了，再偷偷加载资源  缺点：兼容性很差
    import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({mul}) => {
        console.log(mul(4,5));
    })
}

8.pwa

PWA：渐进式网络开发应用程序（离线可访问）

    workbox --> workbox-webpack-plugin

需要先安装：

npm install --save-dev workbox-webpack-plugin

这个主要是使用插件  workbox-webpack-plugin

安装完成了，对webpack.config.js的配置如下：

/*
  PWA：渐进式网络开发应用程序（离线可访问）
    workbox --> workbox-webpack-plugin

*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

process.env.NODE_ENV = 'production';

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      // css文件是放置在js文件内的，不需要单独文件夹存放
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs',
        },
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: true,
        },
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new WorkboxWebpackPlugin.GenerateSW({
      /*
        1.帮助serviceworker快速启动
        2.删除旧的 serviceworker

        生成一个 serviceworker 配置文件
      */
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    // 开启HMR
    // 当修改了webpack配置，新配置想要生效，必须重启webpack服务
    hot: true,
  },
  devtool: 'eval-source-map',
};

9.多线程打包

安装thread-loader

npm install --saave-dev thread-loader

webpack.config.js的loader位置的代码，在打包js的时候开启多进程打包。

{
	test: /\.js$/,
	exclude: /node_modules/,
	use: [
	  /*
		  开启多进程打包
		  进程启动大概为600ms，进程通信也有开销
		  只有工作消耗时间比较长，才需要多进程打包
	  */
	  {
		loader: 'thread-loader',
		options: {
		  workers: 2, // 进程两个
		},
	  },
	  {
		loader: 'babel-loader',
		options: {
		  presets: [
			[
			  '@babel/preset-env',
			  {
				useBuiltIns: 'usage',
				corejs: { version: 3 },
				targets: {
				  chrome: '60',
				  firefox: '50',
				},
			  },
			],
		  ],
		},
	  },
	],
  },

10.externals

这个的作用主要是在html内引入了某些框架的cdn等其他文件，在打包的时候不需要打包

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'production',
  externals: {
    // 通过cdn引入速度更快
    // 格式：忽略库名 --> npm包名
    jquery: 'jQuery', // 拒绝jQuery被打包进来
  },
};

10.dll

使用dll技术对某些库(第三方库：jquery、react、vue)进行单独打包

    当运行webpack时，默认查找webpack.config.js配置文件

    需求：需要运行webpack.dll.js文件

    -->  指令（运行）：webpack --config webpack.dll.js

    安装：add-asset-html-webpack-plugin

配置

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    // 下面的重点是优化了jquery重复打包的性能

    // 告诉webapck哪些库不参与打包，同时使用时得到名称也得变    打包时先忽略jquery
    new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, 'dll/manifest.json'),
    }),
    // 将某个文件打包输出去，并在html内自动引入该资源   会将dll内产生的资源引入到打包后的build文件内   再将jquery引进来
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, 'dll/jquery.js'),
    }),
  ],
  mode: 'production',
};

webpack.dll.js

/*
  使用dll技术对某些库(第三方库：jquery、react、vue)进行单独打包
    当运行webpack时，默认查找webpack.config.js配置文件
    需求：需要运行webpack.dll.js文件
    -->  指令（运行）：webpack --config webpack.dll.js

    安装：add-asset-html-webpack-plugin
*/

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // 最终打包生成的[name] --> jquery
    // ['jquery'] --> 要打包的库是jquery
    jquery: ['jquery'],
    // react: ['react', 'react-dom', 'react-router-dom'],
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'dll'),
    library: '[name]_[hash]', // 打包的库里面向外暴露出去的内容叫什么名字
  },
  plugins: [
    // 打包生成一个manifest.json --> 提供和jquery映射
    new webpack.DllPlugin({
      name: '[name]_[hash]', // 映射库的暴露的内容名称
      path: resolve(__dirname, 'dll/manifest.json'), // 输出文件路径
    }),
  ],
  mode: 'production',
};

运行指令为：webpack