webpack打包基本配置(一)

本文介绍了如何在Vue项目中初始化Webpack,包括全局和本地安装,配置入口文件、开发环境打包,遇到的问题及解决方案。重点讲解了CSS提取、兼容性处理、压缩优化,以及ESLint和Babel配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack初始化以及静态资源的打包

  • (项目地址D:\vueproject\webpack\webpack01)
  • 在项目根路径下 npm init
  • 安装webpack的脚手架
    • npm i webpack webpack-cli -g(全局安装)
    • npm i webpack webpack-cli -D(本地安装)
  • 新建index.js —>webpack的入口文件
  • 运行指令
    • 开发环境:
      webpack ./src/index.js -o ./build/built.js --mode=development
      指令介绍: webpack会以./src/index.js为入口文件开始打包,打包输出到 ./build/built.js
    • eq:碰见的问题:出现系统禁止运行脚本
      解决方法:以管理员权限运行powershell
      输入(set-ExecutionPolicy RemoteSigned 输入A)
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //webpack配置
    //入口起点
    entry: './src/index.js',
    //输出
    output: {
        filename: 'built.js',
        //输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    //loader的配置
    module: {
        rules: [
            //loader的配置

            { //处理css文件
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    //use数组中的loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进去,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容的样式是字符串
                    'css-loader'
                ]
            },
            { //处理less文件
                test: /\.less$/,
                use: [ //使用多个loader用数组
                    'style-loader',
                    'css-loader',
                    //需要下载less-loader 和less
                    'less-loader'
                ]
            },
            {
                // 处理图片资源
                // 夏泽俩个包url-loader file-load,url-loader依赖file-loader
                test: /\.(jpg|png|gif)$/,
                loader: "url-loader",
                // 配置
                options: {
                    // 图片小于10kb,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度变慢)
                    limit: 10 * 1024,
                    // 问题url-loader默认使用es6,html-loader使用的是commonjs
                    // 解决:关闭url-loader的es6模块化,使用commonjs解析
                    esModule: false, //必须添加的参数
                    // 图片文件命名规则
                    name: "[hash:10].[ext]"
                }
            },
            {
                // 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    esModule: false, //必须添加的参数
                }
            },
            // {
            //     //打包其他资源(除了html,js,css资源以外的资源)
            //     //排除css/js/html资源
            //     excloud: /\.(css|html|js)$/,
            //     loader: 'file-loader'
            // }
        ]
    },
    //plugins的配置
    plugins: [
        //详细plugins的配置
        //html-webpack-pluging
        //功能:默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
        //需求:需要有结构的html文件
        new HtmlWebpackPlugin({ //需要上面引入html-webpack-plugin模块 ,npm i html-webpack-plugin -D
            template: './src/index.html',
            //template: 'html-withimg-loader!' + resolve(__dirname, './src/index.html'),
        })
    ],
    mode: 'development', //开发环境
    //mode: 'production',//生产环境

    //开发服务器  devServer :用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
    //特点:只会在内存中编译打包,不会有任何输出
    //启动devServer指令为: npx webpack serve(webpack5的命令) 
    //(npx webpack-dev-server webpack5以下版本的命令) 这个需要下载依赖( npm i webpack-dev-server -D)
    devServer: {
        // 项目构建后路径
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 9000,
        // 自动打开浏览器
        open: true
    }
}

webpack构建环境介绍

1. 提取css成单独文件

  • 下载插件:(npm i mini-css-extract-plugin -D)

2. css兼容性处理

  • 处理css兼容性问题需要postcss—>postcss-loader
    (postcss-loader)需要引入postcss-preset-env
    下载插件:(npm i postcss-loader -D,
    npm i postcss-preset-env -D)
  • 出现的问题(错误信息如下)
==ERROR in ./src/index.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.getOptions (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:502:19)
    at Object.loader (D:\vueproject\webpack\node_modules\postcss-loader\dist\index.js:38:24)
    at processResult (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:676:19)
    at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:778:5
    at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:251:18
 @ ./src/index.js 1:0-21

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.35.1 compiled with 2 errors in 308 ms==
  • 解决办法 对postcss-loader进行版本降级处理
    命令如下
    npm i postcss-loader@3.0.0 -D

3.压缩css

-下载插件(npm i optimize-css-assets-webpack-plugin -D)

还是在webpack.config.js下操作 
需要引入这个插件

const { resolve } = require('path');
//引入html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入生成css文件插件
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
//引入css压缩插件
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')


//设置nodejs的环境变量
//process默认是加载production环境,如果要设置开发环境需要手动配置
process.env.NODE_ENV='development'
module.exports = {
    //webpack配置
    //入口起点
    entry: './src/index.js',
    //输出
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            { 
                test: /\.css$/,
                use: [
                    //'style-loader',
                    //这个loader取代style-loader将css抽取成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    //css兼容性处理
                    /*
                     使用postcss默认配置
                     'postcss-loader'就可以,如果需要修改默认配置需要写成对象形式
                     属性options是修改默认配置的关键
                     
                     postcss-preset-env帮postcss找到package.json中的browserlist里面的配置,通过配置加载指定的css兼容性样式
                     
                    */
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>[
                             require('postcss-preset-env')()
                            ]
                        }
                    }
                ]
            },
            { 
                test: /\.less$/,
                use: [ 
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 10 * 1024,
                    esModule: false, //必须添加的参数
                    name: "[hash:10].[ext]"
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    esModule: false, //必须添加的参数
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ 
            template: './src/index.html',
        })
        ,
        new MiniCssExtractPlugin({
            //对输出的文件重命名
            filename:'css/built.css'
        }),
        //new 出对象就可直接压缩css
        new OptimizeCssAssetsWebpackPlugin({})
    ],
    mode: 'development', //开发环境
    //mode: 'production',//生产环境
    )
}



package.json中browserlist的写法
"browserslist":{
    "development":[
        "last 1 chrome version",//兼容最近1版本的谷歌
        "last 1 firefox version",
        "last 1 szfari version",
    ],
    "production":[
        ">0.2%",//兼容99.8%的浏览器
        "not dead",//不兼容死的浏览器
        "not op_mini all"//不兼容op_mini浏览器
    ]
}

js语法检查 eslint

1 导入所需插件

  • npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

2 js兼容性处理

  • npm i babel-loader @babel/core @babel/preset-env -D
//webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*语法检查 eslint-loader eslint
                注意:只检查自己写的源代码,第三方的库是不用检查的
                设置检查规则:
                package.json中eslintConfig中设置,设置如下:
                    "eslintConfig":{
                            "extends":"airbnb-base"
                        }
                    airbnb--->  eslint-config-airbnb-base  eslint-plugin-import eslint
                    (eq:airbnb后面是所需到的插件,命令如下:npm i eslint-config-airbnb-base  eslint-plugin-import eslint)
            */
            {
            test:/\.js$/,
            exlude:/node-modules/,//排除node-modues下的所有js文件
            {
              loader:'eslint-loader',
              options:{
                   //自动修复eslint的错误
                   fix:true
               }  
            },{
              loader:'babel-loader',
              options:{
                  //预设:指示babel做怎么样的兼容性处理
                  presets:[
                     '@babel/preset-env',
                     {
                        //按需加载
                        useBuiltIns:'usage',
                        //指定core-js的版本
                        corejs:{
                            version:3
                        },
                        //指定兼容性做到哪个浏览器的版本
                        targets:{
                            chrome:'60',
                            firefox:'60',
                            ie:'9'
                        }
                         
                     }
                    ]
               } 
            }
            /*Js兼容性处理:babel-loader @babel/core @babel/preset-env
                1.基本js兼容性处理 -->@babel/preset-env
                问题:只能转换基本语法,如promise高级语法不能转换
                2.全部js兼容性处理---> @bable/polyfill
                问题:我只要解决部分兼容性问题,但是这个会将所有兼容性代码全部引入,会造成体积过过大
                3.需要做兼容性处理的就兼容:按需加载-->
                 core-js(这是插件)
            */
            },
            {//上面的写法不能写在一起,需要分开写,应为加载顺序不同
                test:/\.js$/,
                exlude:/node-modules/,//排除node-modues下的所有js文件
                //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                       //自动修复eslint的错误
                       fix:true
                   }  
            },
            {
                test:/\.js$/,
                    loader:'babel-loader',
                     options:{
                      presets:[
                         '@babel/preset-env',
                         {
                            useBuiltIns:'usage',
                            corejs:{
                                version:3
                            },
                            targets:{
                                chrome:'60',
                                firefox:'60',
                                ie:'9'
                            }
                         }
                      ]
                  }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ 
            template: './src/index.html',
        })
    ],
    mode: 'development', //开发环境
    //mode: 'production',//生产环境
    )
}

package.json文件的配置

"eslintConfig":{
    "extends":"airbnb-base"
}

压缩html和js

  • 生产环境下会自动压缩js
//html压缩如下配置
new HtmlWebpackPlugin({ 
            template: './src/index.html',
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值