webpack5常用配置
文件目录
1. 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在不同浏览器兼容性问题
//.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 区分打包环境
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)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。