webpack5常用配置

2023-11-08 19:29:10

webpack5常用配置

电脑中需要安装node环境，可以输入node -v指令查看node版本

npm install init -y，node项目初始化，生成的默认的package.json

npm install webpack webpack-cli --save-dev

根目录下创建webpack.config.js配置文件

最新版本及详细配置见官网webpack

文件目录

1. webpack五大核心概念

entry：以哪个文件为入口起点开始打包

output：指示打包后的资源输出到哪里，以及如何命名

loader：让webpack能够处理非JavaScript文件

plugin：可以执行范围更广的任务，例如打包优化及压缩等

mode：指示webpack使用相应模式的配置

2. entry

const path = require('path');
module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
}

3. output

const path = require('path');
module.exports = {
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js' //自定义文件名称
	},
}

4. loader

4.1 处理css、less、scss文件

npm intall style-loader css-loader -D

npm install less less-loader -D

npm install sass sass-loader -D

module.exports = {
   module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
             {
                test: /\.scss$/,
                use: ['style-loader','css-loader','sass-loader']
            }
        ]
    },
} 
//注意：从右往左执行，从下往上执行

4.2 处理css3在不同浏览器兼容性问题

npm install postcss postcss-loader postcss-preset-env -D

根目录下创建.browserslistrc文件

//.browserslistrc配置
> 1%               #代表全球超过1%使用的浏览器
last 2 version     #最后2个版本

//webpack.config.js配置
module.exports = {
   module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env']
                            }
                        }
                    }
                ]
            },
        ]
    },
} 
//当less、scss文件都需要使用css兼容处理时，需要在每个loader里进行配置，代码冗余。可以在根目录下创建postcss.config.js配置文件。需要使用什么插件进行添加即可。

//postcss.config.js配置
module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
}
//此时webpack.config.js配置改为
use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
]

4.3 处理图片

npm install file-loader -D

npm install url-loader -D

/*
 *[ext]:扩展名
 *[name]:文件名
 *[hash]:文件内容
 *url-loader将图片转为base64 uri加载到文件中,减少请求次数
 *file-loader将资源拷贝至指定目录,分开请求
 *url-loader内部可以调用file-loader
 */

module.exports = {
     module: {
        rules: [
            {
                test: /\.(png|gif|svg|jpe?g)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'images/[name].[hash:6].[ext]', //简写
                            // outputPath: 'images/'
                            limit: 2048
                        }
                    }
                ]
            }
        ]
     }
}

//使用asset处理
/*
 *asset/resource -->file-loader
 *asset/inline   -->url-loader
 *asset/source   -->raw-loader
 *asset
 */
module.exports = {
     module: {
        rules: [
            {
                test: /\.(png|gif|svg|jpe?g)$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'img/[name].[hash:6][ext]'
                    },
            },
            {
                test: /\.(png|gif|svg|jpe?g)$/,
                    type: 'asset/inline',
            },
            {
                test: /\.(png|gif|svg|jpe?g)$/,
                    type: 'asset',
                    generator: {
                        filename: 'img/[name].[hash:6][ext]'
                    },
                    parser: {
                        dataUrlCondition: {
                            maxSize: 4 * 1024 //4kb
                        }
                    }
            }
        ]
     }
}

4.4 处理图标字体

module.exports = {
     module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:3][ext]'
                },
            }
        ]
     }
}

4.5 处理js兼容

npm i @babel/core @babel/preset-env babel-loader -D

npm i core-js regenerator-runtime -S

module.exports = {
     module: {
        rules: [
                {
                    test:/\.js$/,
                    exclude: /(node_modules)/,
                    use:[
                        {
                            loader:'babel-loader',
                            options:{
                                presets:['@babel/preset-env']
                            }
                        }
                    ]
                }
        ]
     }
}
/*
 *为了避免复杂的配置层次,可以创建babel.config.js配置文件 
 */
module.exports = {
    presets: ['@babel/preset-env']
}

/*
 *使用preset-env时,对于某些语法不能进行填充。webpack5之前会自动填充,webpack5移除自动填充,需要安装polyfill
 *官网建议安装core-js和regenerator-runtime
 *useBuiltIns：false 不对当前的js做polyfill填充
               usage 根据用户源代码中使用的新语法进行填充
               entry 根据需要兼容的浏览器（兼容配置在.browserslistrc配置文件中）语法进行填充
 */

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                useBuiltIns: 'usage',
                corejs: 3
            }
        ]
    ]
}

5. plugin

5.1 clean-webpack-plugin

npm install clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugin:[
        new CleanWebpackPlugin()
    ]
}

5.2 html-webpack-plugin

npm install html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugin:[
        new HtmlWebpackPlugin({
        	template: path.join(__dirname, 'src', 'index.html'),//模板路径
            filename: 'index.html'
        })
    ]
}

5.3 copy-webpack-plugin

npm i copy-webpack-plugin -D

const CopyWebpckPlugin = require('copy-webpack-plugin'); 
module.exports = {
    plugin:[
        new CopyWebpckPlugin({
            patterns: [
                {
                    from: 'public',
                    globOptions: {
                        ignore: ['**/index.html']//由于使用了html-webpack-plugin插件,所以忽略index.html文件
                    }
                }
            ]
        })
    ]
}

6. webpack-dev-server

npm i webpack-dev-server -D

//package.json --方法一
"scripts": {
    "watch": "webpack --watch",
},
//webpack.config.js --方法二    
module.exports = {
        watch: true,
}
/*
 *不足：1.所有源代码都会被编译
 	   2.每次编译成功后都需要文件读写（clean-webpack-plugin插件）
 	   3.live server
 	   4.不能实现局部刷新
 */
    
/*
 *devServer实时编译代码(把打包后的文件放到内存中，不会真正生成存入磁盘)
 */ 
module.exports = {
	devServer: {
            hot: true,     //热更新
            port: 8000,    //端口号
            open: false,   //自动打开浏览器
            compress: true,//开启资源压缩
            proxy: {       //代理设置
                '/api': {
                    target: 'https://api.github.com',
                    pathRewrite: { '^/api': '' },
                    changeOrigin: true,
                }
            }
	}
}
//index.js(热更新)
if (module.hot) {
    module.hot.accept(['xxx.js'], () => {})
}

7. reslove模块解析

/*
 *extensions:添加引入文件时没有后缀的补充(存在默认值)
 *alias:import|require文件时目录的简化(定义别名)
 */
module.exports = { 
    reslove: {
            extensions: ['.js', '.json', '.ts', '.vue', 'jsx'],
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
    },
}

8. dev-tool

source-map：在调试时可以定位到源代码中的信息，生成独立map文件

cheap-source-map：只提供报错行信息，不提供列信息（第三方插件处理后的位置）

cheap-module-source-map：只提供报错行信息，不提供列信息（第三方插件处理前的位置）

模式：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

/*
 *开发模式推荐使用cheap-module-source-map；如果使用框架，则使用框架默认的即可
 */
module.exports = {
    devtool: "cheap-module-source-map",
}

9.环境配置

9.1 区分打包环境

对配置文件webpack.config.js进行拆分

1.创建config文件夹

2.创建webpack.common.js、webpack.dev.js 、 webpack.prod.js文件

//package.json文件
 "scripts": {
    "dev": "webpack --config ./config/webpack.common.js --env prodution",
    "serve": "webpack serve --config ./config/webpack.common.js --env development"
  },

//webpack.common.js文件
module.exports = (env) => {
    const isProduction = env.production
    return {

    }
}

9.2 合并生产环境配置

//webpack.common.js文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');

const prodConfig = require('./webpack.prod'); //生产环境配置
const devConfig = require('./webpack.dev');   //开发环境配置

const commonConfig = {
   //webpack.common.js配置信息
}
module.exports = (env) => {
    const isProduction = env.production;

    const config = isProduction ? prodConfig : devConfig

    //合并配置信息
    return merge(commonConfig, config)
}

码农公寓

webpack5常用配置

文件目录

1. webpack五大核心概念

2. entry

3. output

4. loader

4.1 处理css、less、scss文件

4.2 处理css3在不同浏览器兼容性问题

4.3 处理图片

4.4 处理图标字体

4.5 处理js兼容

5. plugin

5.1 clean-webpack-plugin

5.2 html-webpack-plugin

5.3 copy-webpack-plugin

6. webpack-dev-server

7. reslove模块解析

8. dev-tool

9.环境配置

9.1 区分打包环境

9.2 合并生产环境配置

相关文章