关于webpack:Webpack一些配置介绍

装置

全局装置webpack和webpack-cli，是为了能够应用webpack这个命令，不然你应用不了命令，当然手动增加环境变量也是能够的，部分装置是为了锁定版本，不便开发对立版本号，这里是应用了指定版本号的，也是踩了坑的，版本号不同，配置大同小异，然而，外面一个变动，你不晓得，出错了就有你好查的了。
自己在做开发的时候，遇到的最多的就是版本号的坑。基本上webpack版本号是多少，其余的关联包，根本都要在肯定范畴内，超出了范畴，就等着一堆报错吧，自己用的这个版本是本人踩过确定可用的。
```
npm i webpack@4.46 webpack-cli-3.3.12 -g
npm i webpack@4.46 webpack-cli-3.3.12 -D
```
如果不想批改一次内容，就打包一次看成果，还能够装置上面和这个包
而后只须要运行，npx webpack-dev-server 或者 npx webpack serve，而后咱们再改变代码，就能立即在浏览器中看到对应的成果了
npx webpack-dev-server不好记还长，那么在package.json的scripts中配置个dev启动命令吧："dev": "webpack-dev-server" 或者 "dev": "webpack serve"
该形式就是用来实时预览的，不会打包，只会在内存中虚构打包，让你看到成果，须要打包的话还是要应用webpack命令打包。
```
npm i webpack-dev-server@3.11.0
```

package.json文件中的配置

// 更新于2022/02/22
{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.js",
    "prod": "webpack --config webpack.prod.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "add-asset-html-webpack-plugin": "^5.0.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "core-js": "^3.21.1",
    "css-loader": "^4.3.0",
    "eslint": "^7.11.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.25.4",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "less": "^4.1.2",
    "less-loader": "^6.0.0",
    "mini-css-extract-plugin": "^1.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^8.1.1",
    "postcss-loader": "^4.0.4",
    "postcss-preset-env": "^7.4.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "core-js": "^3.21.1",
    "jquery": "^3.6.0"
  },
  "browserslist": {
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base",
    "parser": "babel-eslint"
  }
}

webpack.config.js配置

配置中的五个外围点

Entry（入口）
- Entry 批示 Webpack 以哪个文件为入口终点开始打包，剖析构建外部依赖图
Output（输入）
- Output 批示 Webpack 打包后资源的 bundles 输入到哪里去，以及如何命名
Module
- Module中的Loader 让 Webpack 可能去解决那些非JS文件（webpack自身只了解JS，还有JSON）
Plugins（插件）
- Plugins 能够用于执行范畴更广的工作，插件的范畴包含从打包优化和压缩，始终到从新定义环境中的变量等
Mode（模式）
- Mode 批示 Webpack 应用相应模式的配置
  - development
  - production

配置文件具体代码

/*
    webpack.config.js: webpack的配置文件
    作用：批示webpack干哪些活，即当你运行webpack指令时，会加载外面的配置

    所有构建工具都是基于NodeJS平台运行的， 所以模块化采纳的都是commonjs

    开发环境配置
*/

// 应用resolve用来拼接绝对路径的办法
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')

// 设置nodejs环境变量
process.env.NODE_ENV = 'development'

/*
    entry: 入口终点
    1. string ---> './src/index.js'
        - 单入口
        - 打包造成一个chunk，输入一个bundle文件。
        - 此时chunk的名称默认为main
    2. array ---> ['./src/index.js','./src/index2.js']
        - 多入口
        - 所有入口文件最终只会造成一个chunk，输入进来只有一个bundle文件。
        - 一般来讲，只有在HMR性能中让html的热更新失效：['./src/index.js','./src/index.html']
    3. object ---> { index: './src/index.js', index2:'./src/index2.js'}
        - 多入口
        - 有几个入口文件就造成几个chunk，输入几个bundle文件，这个也是文件切割的一种模式
        - 此时chunk的名称是key
        - 非凡用法：能够用来把两个打包成一个
            {
                index: ['./src/index.js','./src/add.js', 
                index2:'./src/index2.js'
            }
*/

module.exports = {
    // webpack配置
    // 入口
    entry: ['./src/index.js','./src/index.html'],
    // 输入
    output: {
        // 输入文件名
        filename: 'js/[name].[hash:10].js',
        // 输入门路
        path: resolve(__dirname,'dist'),

        // 所有资源引入的公共门路前缀：'./img/bg.png'
        // publicPath: '/',

        // 非入口chunk的名称
        // chunkFilename: '',

        // 整个库向外裸露的变量名,个别只有联合dll才应用
        // library: '[name]',

        // 变量名增加到哪个上
        // libraryTarget: 'window'
        // libraryTarget: 'browser'
    },
    // loader的配置
    module: {
        // 具体loader配置
        rules: [
            // JS的语法查看：eslint eslint-loader
            // 除了要下面的两个，咱们还须要下载个规定，规定的意思是依照下面规定查看js的谬误
            // airbnb: eslint-config-airbnb-base eslint-plugin-import
            // 除此之外还要在package.json中配置 eslintConfig 
            {
                test: /\.js$/,
                // 须要留神的是咱们只须要查看本人的源代码，第三方的库是不必查看的
                exclude: /node_modules|css/,

                // 只查看src文件夹上面的文件
                // include: resolve(__dirname, 'src'),

                // 优先执行，比方eslint和babel这里两个，eslint就要先执行，不然就非常容易报错
                enforce: 'pre',

                // 延后执行，不写是两头执行
                // enforce: 'post',

                loader: 'eslint-loader',
                options: {
                    // 开启eslint主动修复eslint的谬误
                    fix: true
                }
            },
            {
                // 以下loader只会匹配一个，防止每个文件都过了一遍loader，次要是生产环境的打包速度优化
                // 留神：不能有两个配置解决批准类型文件，比方babel-loader和eslint-loader都要解决js，那样只会执行一个，所以把其中一个还间接放在rules中
                oneOf: [     
                    // css文件解决
                    {
                        // 正则匹配文件
                        test: /\.css$/,
                        
                        // 指定须要应用的loader
                        // use数组中loader执行程序是，从右到左，从下到上
                        // use外面能够是间接的字符串，也能够是对象，应用对象通常使咱们要批改外面的配置
                        use: [
                            // 创立一个style标签，将js中的款式资源插入到进去，增加到head中失效
                            // 'style-loader',
                            // 和下面style-loader不同的是，应用插件，能够把css独自打包进去
                            {
                                loader: MiniCssExtractPlugin.loader,
                                options: {
                                    publicPath: '../'
                                }
                            },
                            // 将css文件，变成commonjs模块，加载到js中。外面的内容是款式字符串
                            'css-loader',
                            // css兼容性解决，须要用到postcss，须要下载postcss-loader和postcss-preset-env 
                            {
                                loader: 'postcss-loader',
                                options: {
                                    postcssOptions: {
                                        ident: 'postcss',
                                        plugins: () => {
                                            require('postcss-preset-env')()
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    // less文件解决
                    {
                        // 正则匹配文件
                        test: /\.less$/,
                        use: [
                            {
                                loader: MiniCssExtractPlugin.loader,
                                options: {
                                    publicPath: '../'
                                }
                            },
                            'css-loader',
                            // css兼容性解决，须要用到postcss，须要下载postcss-loader和postcss-preset-env 
                            {
                                loader: 'postcss-loader',
                                options: {
                                    postcssOptions: {
                                        ident: 'postcss',
                                        plugins: () => {
                                            require('postcss-preset-env')()
                                        }
                                    }
                                }
                            },
                            'less-loader'
                        ]
                    },
                    // 图片解决
                    {
                        // 正则匹配文件
                        test: /\.(jpg|png|gif|jpeg)$/,
                        // 因为url-loader依赖于file-loader，所以要下载两个loader
                        loader: 'url-loader',
                        options: {
                            // 图片小于8kb,会被转换成base64,
                            // 长处：缩小申请数量，加重服务器压力
                            // 毛病：图片提及会更大，文件申请诉速度会更慢
                            limit: 8092,
                            // 手动设置图片的名字（能够不设置）：name（图片原来的名字），hash（hash值，10代表去前10位），ext（图片原来的格局）
                            name: '[name].[hash:10].[ext]',
                            // 因为文件的引入是es6语法，然而webpack是遵循commonjs规定的，所以想要html文件中想要应用图片，必须把es6关掉。这是给上面的html中图片解决用的
                            esModule: false,
                            // 指定打包后文件输入地位
                            outputPath: 'assets/imgs'
                        }
                    },
                    // html中图片解决
                    {
                        // 正则匹配文件
                        test: /\.html$/,
                        loader: 'html-loader',
                    },
                    // 解决其余类型文件
                    {
                        // 排除css,js,html等文件，应用这个打包形式
                        exclude: /\.(html|js|css|less|png|jpg|jpeg|gif)/,
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash:10].[ext]',
                            outputPath: 'assets'
                        }
                    },
                    // JS的兼容解决，即ES6转ES5：babel-loader, @babel/core, @babel/preset-env
                    // @babel/preset-env只做根本语法的转换
                    // @babel/polyfill做全类型转换，然而有一点，咱们只须要做局部的转换，全副引入，体积就会太大了
                    // 按需加载：应用core.js
                    {
                        test: /\.js$/,
                        exclude: /node_modules|css/,
                        loader: 'babel-loader',
                        options: {
                            // 预设：批示babel做怎么样的兼容解决
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        // 按需加载
                                        useBuiltIns: 'usage',
                                        // 指定core-js版本
                                        corejs: {
                                            version: 3
                                        },
                                        // 指定兼容性做到浏览器的那个版本
                                        targets: {
                                            chrome: '60',
                                            firefox: '50',
                                            ie: '9',
                                            safari: '10',
                                            edge: '15'
                                        }
                                    }
                                ]
                            ],
                            // 开启babel缓存
                            // 第二次构建时，会读取之前的缓存
                            // 次要是防止多个js的状况下，只批改其中一个或一部分，导致所有的js都要再构建一次
                            cacheDirectory:true
                        }
                    }
                ]
            },
        ]
    },
    // plugins的配置
    plugins: [
        // 解决html
        // html-webpack-plugin
        // 性能：默认会创立一个空的HTML文件，主动引入打包好的所有资源
        new HtmlWebpackPlugin({
            // 复制'./src/index.html' 文件到打包好的文件中，并引入所有资源
            template: './src/index.html',
            // 压缩html代码
            // minify: {
            //     // 移除空格
            //     collapseWhitespace: true,
            //     // 移除正文
            //     removeComments: true
            // }
        }),
        // css独自提出来
        new MiniCssExtractPlugin({
            // 应用contenthash，能够让css应用缓存，只有当css批改才会从新打包，而hash和chunkhash都不行，因为hash每次打包都不一样，而chunkhash不行是因为css是在js中引入的，所以每次也都是变动的
            filename: 'css/built.[contenthash:10].css'
        }),

        // 压缩css
        // new OptimizeCssAssetsWebpackPlugin()

        // 通知webpack哪些库不参加打包，同时应用时的名称也须要扭转
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')
        }),
        // 将某个文件打包输入进来，并在html中主动引入改文件（给dll性能应用的）
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ],
    // 模式
    mode: 'development',     // 开发模式
    // mode: 'production',      // 生产模式，该模式会主动压缩代码

    // 开发服务器 devServer: 用来自动化的编译，关上浏览器，主动刷新浏览器
    // 自会在内存中编译打包，不会有任何的输入
    devServer: {
        // 我的项目构建后门路
        contentBase: resolve(__dirname, 'dist'),
        // 是否在首次编译后主动关上浏览器
        open: true,
        // 启动gzip压缩
        compress: true,
        // 地址
        host: '127.0.0.1',
        // 端口好
        port: 8527,
        /* 
            开启HMR性能，HMR：hot module replace（热加载）
            * css在hot: true默认开启HMR
            * js默认没有开启HMR
                - 入口JS文件不须要开启HMR，所以须要监听的是其余模块
                - 其余JS文件的监听形式是在入口JS外面写一个监听代码
                    if(module.hot) {
                        // 办法会监听add.js文件，一旦发生变化，其余模块会从新打包构建
                        // 而后执行前面的回调函数
                        module.hot.accept('./asstes/js/add.js',function() {
                            add()
                        })
                    }
            * html默认没有开启HMR，而且同时会导致html的热更新生效，复原热更新须要批改entry --> entry: ['./src/index.js','./src/index.html']，然而还是没有HMR，html也不须要HMR，尤其是单页面只有一个index.html的状况下
                - 额定说：热更新和热加载不一样：
                - 热更新：文件内动改变后，整个页面刷新，不保留任何状态（比方输出过内容的Input表单），相当于webpack帮你摁了F5刷新
                - 热加载：文件改变后，以最小的代价扭转被扭转的区域。尽可能保留改变文件前的状态（对input输出内容后，批改其余标签的代码）
        */
        hot: true,
        // 监督contentBase目录下的所有文件，一旦文件变动就会reload
        watchContentBase: true,
        // 监督文件的配置
        watchOptions: {
            // 疏忽要监督的文件
            ignored: /node_modules/
        },
        // 不要显示启动服务器日志信息
        clientLogLevel: 'none',
        // 除了一些根本的启动信息外，其余内容都不要显示
        quiet: true,
        // 如果出错了，不要全屏提醒
        overlay: false,
        // 服务器代理：解决开发环境跨域问题
        proxy: {
            // 一旦devServer(8527)服务器接管到 /api/xxx 的申请，就会转发到另个服务器上（3000）
            '/api': {
                target: 'http://localhost:3000',
                // 发送申请时，申请门路重写，将 /api/xxx --> /xxx  (去掉了 /api)
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    // 提供源代码到构建后代码映射技术
    devtool: 'eval-source-map',

    /*
        文件离开打包的第二种模式
        能够将node_modules中代码独自打包成一个chunk最终输入，入口文件独自一个chunk
        下面的是单入口文件，该性能还会主动剖析多入口chunk中，有没有公共的文件，如果有会打包成一个独自的chunk
    */ 
    // optimization: {
    //     splitChunks: {
    //         chunks: 'all'
    //     }
    // },

    // 用来解决咱们不须要本人打包，而是通过cdn引入的一些文件
    // externals: {
    //     // 回绝某个文件被打包
    //     jquery: 'jQuery'
    // }

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

}

/*
    tree shaking: 必须在production模式下，另外一个条件是，须要应用ES6的模块化，在这两个条件满足的状况下，会主动去除无用代码，较少代码体积
    PS: 有的版本的treeshaking有点问题，会把css当成无用代码干掉，这个时候须要在package.json中增加点配置
        - "sideEffects": ["*.css","*.less"]  意思是避开css和less文件进行tree shaking
        - "sideEffects": false      意思是所有文件都能够进行tree shaking
*/

/*
    source-map: 提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射能够追踪源代码的谬误）

    source-map: 内部
        - 错误代码精确信息 和 源代码的谬误地位
    inline-source-map: 内联
        - 只生成一个内联source-map
        - 错误代码精确信息 和 源代码的谬误地位
    hidden-source-map: 内部
        - 错误代码的谬误起因，然而没有提醒谬误地位
        - 不追踪源代码的谬误，只能提醒到构建后代码的谬误地位
    eval-source-map: 内联
        - 每一个文件都生成对应的source-map，都在eval
        - 错误代码精确信息 和 源代码的谬误地位
    nosource-source-map: 内部
        - 错误代码精确信息，然而没有人任何源代码信息
    cheap-source-map: 内部
        - 错误代码精确信息 和 源代码的谬误地位
        - 只能准确到行，然而不能准确到行的哪一块出错
    cheap-module-source-map: 内部
        - 错误代码精确信息 和 源代码的谬误地位
        - module会将loader的source-map退出

    内联和内部的区别：
    1.内部生成了文件，内联没有
    2.内联构建速度更快

    开发环境：速度快，调试敌对
        - 速度快（eval>inline>cheap>...）
            + eval-cheap-source-map 这个组合最快
            + eval-source-map
        - 调试更敌对
            + source-map
            + cheap-module-source-map
            + cheap-source-map

        - 个别开发环境用 eval-source-map
    生产环境：源代码要不要暗藏，调试要不要敌对
        - 内联会让体积变大，所以生产环境不要用内联
        - nosource-source-map: 全副代码暗藏
        - hidden-source-map: 只暗藏源代码，会提醒构建后代码错误信息

        - 个别生产环境用 source-map
*/

关于webpack:Webpack一些配置介绍

装置

package.json文件中的配置

webpack.config.js配置

配置中的五个外围点

配置文件具体代码

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

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

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

关于webpack:Webpack一些配置介绍

装置

package.json文件中的配置

webpack.config.js配置

配置中的五个外围点

配置文件具体代码

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

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

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

发表回复取消回复