标签：webpack5 exports plugin 配置 常用 module loader webpack js

webpack5常用配置

1. 电脑中需要安装node环境，可以输入node -v指令查看node版本
2. npm install init -y，node项目初始化，生成的默认的package.json
3. npm install webpack webpack-cli --save-dev
4. 根目录下创建webpack.config.js配置文件
5. 最新版本及详细配置见官网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,exports,plugin,配置,常用,module,loader,webpack,js
来源： https://blog.csdn.net/weixin_46719229/article/details/120633748

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。