webpack 学习

webpack

1 指令

1.1 开发环境： webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js，整体打包环境是开发环境

1.2 生产环境： webpack ./src/index.js -o ./build/built.js --mode=production

2 结论

2.1 webpack能处理js和json文件，不能处理css/img等其他的资源
2.2 生产环境和开发环境 将es6模块化编译成浏览器能识别的模块化
2.3 生产环境比开发环境多一个压缩js代码

webpack.config.js

当运行webpack指令时，会加载其中的配置
所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
process.env.NODE_ENV='development'
module.exports={
    entry:'入口',
    output:{
        'filename':'输出文件名',
        'path':resolve(__dirname,'dist')//__dirname 是 nodeJS的变量 代表当前文件的目录绝对路径
    },
    //loader 配置 loader: 1 下载 2 使用 配置loader
    module:{
        rules:[
            //详细的loader配置
            //不同文件必须配置不同的loader处理
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use 数组中的执行顺序：从右到左 / 从下到上 一次执行 
                    'style-loader',//创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader',//将 css 文件变成commonjs模块加载js中，里面内容是样式字符串
                ]
            },
            {
                //匹配哪些文件
                test:/\.less$/,
                //使用哪些loader进行处理
                use:[
                    //use 数组中的执行顺序：从右到左 / 从下到上 一次执行 
                    'style-loader',//创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader',//将 css 文件变成commonjs模块加载js中，里面内容是样式字符串
                    //需要下载less-loader 和 less
                    'less-loader',//将 less 文件编译成 css 文件
                ]
            },{
                //问题: 处理不了html中img图片
                //处理图片资源
                test:/\.(jpg|png|gif)$/
                //使用一个loader，可以直接写loader 需要下载 file-loader 和 url-laoder
                loader:'url-loader',
                //图片小于8kb,就会被base64处理
                //优 减少请求数量
                //缺 图片体积会更大
                options: {
                    limit: 8 * 1024,
                    //问题，url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析会出现问题:[object Module]
                    //解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    //给图片进行重命令
                    // [hash:10]取图片的hash的前10位
                    // [ext] 取文件原来扩展名
                    name: '[hash:10].[ext]',
                    //可以设置输出目录
                    outputPath: ''
                }
            },{
                test:/\.html$/
                //处理html文件的img图片，负责引入img，从而被url-loader处理
                loader:'html-loader'
            },{
                //处理其他资源
                exclude:/\.(html|js|css|less|jpg|png|gif)/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    //插件配置 plugins 1下载 2引入 3使用
    plugins:[
        //详细的插件配置
        //html-webpack-plugin 
        //功能：创建一个空的html，自动引入打包后的所有资源
        new HtmlWebpackPlugin({
            template: ''// 复制模板文件，并自动引入打包输出的所有资源。如果需要有结构的html文件，就需要使用这个
        })
    ],
    mode: 'development' //或 production

    //开发服务器 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器...）
    // 特点： 只会在内存中编译打包，不会有任何输出
    // 启动 devServer指令为 npx webpack-dev-server (需要安装webpack-dev-server)
    devServer:{
        //项目构建后的目录
        contentBase: resolve(__dirname,'build'),
        //启用gzip压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true
    }
}

生产环境配置优化

1.css成单独文件 & css兼容性处理 & 压缩css

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')
module.exports = {
    entry:'',
    output:{

    },
    modudle:{
        rules:[
        {
            //匹配哪些文件
            test:/\.css$/,
            use:[
                //use 数组中的执行顺序：从右到左 / 从下到上 一次执行 
                //'style-loader',//创建style标签，将js中的样式资源插入进行，添加到head中生效
                //这个loader 取代style-loader。作用 提取js中的css成单独文件
                MiniCssExtractPlugin.loader,
                'css-loader',//将 css 文件变成commonjs模块加载js中，里面内容是样式字符串
                /*
                    css 兼容性处理 postcss --->postcss-loader postcss-preset-env
                    
                    帮postcss找到package.json中的browserslist里的配置，通过配置加载指定的css兼容性样式
                    github 里有 browserslist 的 详细介绍
                 */
                //使用loader的默认配置
                //postcss-loader
                //修改loader的配置
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        plugins:()=>[
                            //postcss的插件
                            require('postcss-preset-env')()
                        ]
                    }
                }
            ]
        }
    ]},
    plugin:[
        new MiniCssExtractPlugin({
            //对文件进行重命名
            filename:'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'production'
}

package.json
{
    "browserslist":{
        //开启开发环境 process.env.NODE_ENV='development'
        "development":[
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        //默认生产
        "production":[
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }
}

2. js语法检查 eslint

module.exports={
    module:{
        rules:[
            /*
                语法检查 eslint-loader eslint
                注意 只检查自己写的源代码，第三方的库不检查
                设置检查规则
                package.json 中 eslintConfig 或者 文件.eslintrc
                "eslintConfig":{
                    "extends":"airbnb-base"
                }
                可以使用 airbnb --> 使用react 的话，使用 eslint-config-airbnb 依赖的库如下 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y
                不用react的话 可以使用 eslint-config-airbnb-base 同时需要安装 eslint, eslint-plugin-import,
             */
            {
                test: /\.js$/,
                exclude:/node_modules/,
                loader:'eslint-loader',
                options:{
                    //自动修复 eslint的错误
                    fix: true
                }
            }
        ]
    }
}

package.json
{
    "eslintConfig":{
        "extends":"airbnb" //或 airbnb-base
    }
}

//忽略检查 eslint

//下一行eslint所有规则都失效
//eslint-disable-next-line
console.log('...')

3. js兼容性处理 eslint

module.exports={
    //......
    module:{
        rules:[
            /*
            js 兼容性处理 babel-loader  @babel/core  @babel/preset-env
                1.基本兼容性处理 -->  @babel/preset-env
                    问题： 只能转换基本语法，如promise等高级语法不能转换
                2.全部js兼容性处理 --> @babel/polyfill 使用的时候只需要引入即可，如在入口文件
                   问题：只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
                3. 需要做兼容性处理的就做，按需加载 使用core-js  使用 3 就不能使用 2  或者在入口文件分别引入相应的core.js
            */
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    // 预设 ：指示babel做怎样的兼容性处理
                    presets:[
                       [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns:'usage',
                                //指定core-js版本
                                corejs:{
                                    version:3
                                },
                                //指定兼容性做到哪个版本的浏览器
                                targerts:{
                                    chrome: '40',
                                    fixfox: '50',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                       ]
                    ]
                }
            }
        ]
    }
}

4. js和html 压缩

    module.exports = {
        //....
        plugins:[
            new HtmlWebpackPlugin({
                template: './public/index.html',
                //压缩html代码
                minify:{
                    //移除空格
                    collapseWhitespace:true,
                    //移除注释
                    removeComment:true
                }
            })
        ],
        mode:'production'//生产环境会自动压缩js
    }