webpack总结

webpack定义

本质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。
当 webpack 处理应用程序时，它会递归地构建一个 依 赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

安装

md webpack
//新建webpack文件夹

npm init -y
//初始化项目 -y全为true

npm i webpack webpack-cli -D
//安装

核心概念

webpack.config.js文件

entry 入口

entry: {
    vue:'./src/main.js',
    base:'./src/index.js'
},

output 出口

output: {
    // 文件名
    filename: "main-[contenthash:7].js",
    // 文件夹__dirname 当前目录
    path: __dirname + "/dist"
},

plugins 插件

//处理html
# npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require("html-webpack-plugin");
    new HtmlWebpackPlugin({
        // 指定模板文件
        filename:'index.html',
        template: './public/index.html',
        chunks:['vue'],//指定vue入口打包进来
    }),
    new HtmlWebpackPlugin({  // Also generate a test.html
        filename: 'base.html',
        template: './public/base.html',
        chunks:['base'],//指定base入口打包进来
      }),
      
      
// 处理css
css-loader 分析css关系-合并一个css（import）
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
css-minimizer-webpack-plugin 用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css
less less-loader 处理less文件

# npm install css-loader style-loader mini-css-extract-plugin  css-minimizer-webpack-plugin -D
// 导入css压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  new MiniCssExtractPlugin({
        filename: "style-[contenthash:7].css"
    }),
  optimization: {
    minimizer: [
        new CssMinimizerPlugin(),
      ]
 },
    
// 导入vue插件loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
    // 实例化vueloader
    new VueLoaderPlugin(),


# npm install --save-dev copy-webpack-plugin
// 导入copy（拷贝文件到另外一个文件夹）
const CopyWebpackPlugin = require('copy-webpack-plugin');
    new CopyWebpackPlugin(  // 设置静态目录
            {
            patterns: [
                // { from: __dirname+'/public', to: __dirname+'/dist' },
                //from 从， to 到 __dirname 当前目录
                { from: __dirname + '/src/static', to: __dirname + '/dist/static' },
            ],
        }
    ),

# npm install clean-webpack-plugin webpack-dev-server -D
// 导入清空插件(清空压缩过的文件，重新压缩)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
	new CleanWebpackPlugin(),

loader 加载器

module

处理图片与文件

file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。

module: {
    rules: [
        { //vue 解析
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: { //开发环境使用style-loader打包
                    css: ['style-loader', 'css-loader'],
                    less: ['style-loader', 'css-loader', 'less-loader']
                }
            }
        },
        // loader有顺序，从右到左
        { test: /\.css$/, use: [/*'style-loader'*/MiniCssExtractPlugin.loader, "css-loader"] },
        { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] },
        {
            test: /\.(jpg|jpeg|png|gif|webp|ico)$/, use:
                [{ loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[ext]' } }]
        },
    ]
},

mode 配置模式

package.json文件
"scripts": {
  "build": "cross-env NODE_ENV=production webpack",
  "serve": "cross-env NODE_ENV=development webpack serve",
},
webpack.config.js文件
mode: process.env.NODE_ENV,//production(产品模式) |development(开发模式)

devServer 本地服务器

devServer: {
    open: true,//打开浏览器
    host: 'localhost',//本地域名
    port: 8080,//端口号
    hot: true,//热更新
}

optimization

// 导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");

optimization: {
    minimizer: [
        new CssMinimizerPlugin(),
        new TerserWebpackPlugin()
    ]
},

resolve

设置@为src目录的别名

// 导入path
const path = require('path');
resolve: {
    alias: {
        '@': path.resolve(__dirname, './src'),
    },
},

devtool

devtool: "source-map",//映射打包前错误行数

优化

1. css优化压缩
   const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”);
2. js优化压缩
   const TerserWebpackPlugin = require(“terser-webpack-plugin”);
   optimization: {
   minimizer: [
   new CssMinimizerPlugin(),
   new TerserWebpackPlugin()
   ]
   },
3. devtool与sourceMap
4. 异步加载
   import(xxx)
   .then()
5. 预加载
   import(/* webpackPrefetch:true */“jquery”)
6. hash命令
   hash
   chunkhash
   如果入口发生变化就会变化
   contenthash
   如果内容发生变化名称发生变化
7. tree shaking（摇树）
8. 按需导入js
   借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
9. splitChunks（代码分包）
   optimization: {
   splitChunks: {
   chunks: “all”,
   // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
   },
10. 图片优化
    image-webpack
11. 压缩图片
    file-loader
    base64格式