webpack自动化构建工具

╰半橙微兮° 2022-04-03 10:16 360阅读 0赞

[webpack官网][webpack]  
电脑已经安装了git和node  
主要四大部分是：  
入口（entry）  
输出（output）  
解析器（loader）  
插件（plugins）

1/ npm（包管理工具）全局（-g）安装webpack和webpack-cli（命令行接口）  
npm install webpack webpack-cli -g  
2/ 初始化当前项目  
npm init  
在项目文件夹中生成 package.json  
3/ 局部安装  
npm install webpack webpack-cli -D 或者npm install webpack webpack-cli --save-dev （开发环境）  
在项目文件夹中生成 node\_modules 和 package-lock.json  
(如果把项目发给别人，可以把node\_modules删掉发，对方执行“npm install”命令就可以重新下载)  
4/ 执行 webpack 命令，打包处理  
默认入口路径 src/index.js ， 打包输入默认路径 dist/main.js  
5/ 配置文件  
环境变量 生产环境 production 开发环境 development  
（shell语句） 命令 webpack --mode=development (输出文件未压缩)--------可以写到配置文件中  
可以根据shell语句和配置文件设置打包方式  
在项目中建 webpack.config.js 配置文件（可以配置两套配置文件，执行命令 webpack -config=名字）  
配置文件详情请见demo  
6/ 监听依赖文件变化 自动打包不能自动刷新  
webpack --watch  
开启服务器（可以自动刷新）  
webpack-dev-server （先下载 npm install webpack-dev-server -D）  
操作步骤：配置文件  
![在这里插入图片描述][20181221180816547.png]  
改成绝对路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
webpack-dev-server --hot 只更新变化的部分

同一入口的多个js文件会打包一起；多个css文件和less文件会打包一起（如果使用插件单独打包的话）

html文件如果用的插件’html-webpack-plugin’打包，而不是引入到入口文件中打包，那html文件中的image就不会打包，解决办法：首先下载html-withimg-loader，其次先引入模块var html = require(‘html-withimg-loader’); 然后在module中配置 \{test: /.(htm|html)$/i, use: \[‘html-withimg-loader’\]\}，注意，如果有注释掉的图片引入代码也会加载

webpack.config.js文件配置：

//引入nodejs的path模块
    var path = require('path');
    
    //分离html插件 需要先下载插件 命令 npm install html-webpack-plugin -D
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    //压缩js插件 命令 npm install uglifyjs-webpack-plugin -D
    var Uglify = require('uglifyjs-webpack-plugin');
    //抽离css文件(单独打包) 命令 npm install mini-css-extract-plugin -D
    var Minify = require('mini-css-extract-plugin');
    //打包html文件中的图片
    var html = require('html-withimg-loader');
    
    module.exports = {
        //入口文件（可以字符串/数组/对象）
        // entry:'./src/main.js',
        //可以有多个入口文件，则输出文件也要对应有多个，写法见下面
        entry:{
            mainBund:'./src/main.js',
            // xiaoMainBund:'./src/xiaoMain.js'
        },
        //输出文件
        // output:{
        //     filename:'bundle.js',
        //     //根目录下的dist
        //     path:path.resolve(__dirname, 'dist')
        // },
        output:{
            filename:'[name].js', //这个name是mainBund
            //根目录下的dist
            path:path.resolve(__dirname, 'dist')
        },
        //生产环境
        mode:'development',
        //开启/设置服务器
        devServer:{
            contentBase:'dist',
            port:9999,
        },
        //loader解析器
        module:{
            rules:[
                // css  loader
                {
                    test:/\.css$/,
                    //需要先下载使用命令 npm install style-loader css-loader -D
                    //以style的形式解析成行间样式了，解析的时候从后往前解析
                    // use:['style-loader', 'css-loader']
                    //单独打包css文件，要用到mini-css-extract-plugin插件
                    use:[Minify.loader, 'css-loader']
                },
                //html loader
                {
                    // test:/\.html$/,
                    // //需要先下载使用命令 npm install file-loader html-loader extract-loader -D
                    // use:[
                    //     //单独抽离的html文件进行配置
                    //     {
                    //         loader:'file-loader',
                    //         options:{
                    //             name:'index.html'
                    //         }
                    //     },
                    //     //单独抽离html
                    //     {
                    //         loader:'extract-loader'
                    //     },
                    //     //找到html文件
                    //     {
                    //         loader:'html-loader'
                    //     }
                    // ]
                },
                //js loader (es6)
                {
                    // test:/\.js$/,
                    // //需要先下载使用命令 npm install babel-loader -D
                    // use:['babel-loader']
                },
                //图片img  loader
                {
                    test:/\.(jpg|png)/,
                    //命令  npm install url-loader -D (url-loader包括file-loader)
                    use:[
                        {
                            loader:'url-loader',
                            //如果不做处理，会以base64展示图片，做一下规定：如果小于8192则以base64，否则将图片输出到dist文件夹下
                            options:{
                                limit:8192,
                                name:'image/[name].[hash:8].[ext]'
                            }
                        }
                    ]
                },
                //less文件  loader
                {
                    test:/\.less$/,
                    //需要先下载使用命令 npm install less less-loader css-loader -D
                    use:[Minify.loader, 'css-loader', 'less-loader']
                },
                //打包html文件中的图片
                {
                    test: /\.(htm|html)$/i, 
                    use: ['html-withimg-loader']
                }
            ]
        },
        //plugins插件
        plugins:[
            new HtmlWebpackPlugin({
                //只有在没有引用模板时title才起作用
                title:'title',
                template:'./src/index.html',
                chunks: ['mainBund'],  //如果有多个入口文件，用这个属性可以指定入口文件
                // inject:false, //不引入js文件
                //将生成的html文件压缩
                // minify:{
                //     collapseWhitespace:true
                // }
            }),
            // new Uglify(), // 压缩js插件
            new Minify({
                filename:'[name]_[contenthash:8].css'
            })
        ]
    }

欢迎交流指正！

[webpack]: https://webpack.docschina.org/
[20181221180816547.png]: /images/20220403/4c2fb269476142a4a402f8dbab2e0f5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220403/fd75f0694a29450e9193ec7890eeb995.png