webpack4知识汇总2
Posted cyany
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4知识汇总2相关的知识,希望对你有一定的参考价值。
跨域
devServer:{
proxy:{
‘/api‘:{
target:‘http:localhost:3000‘,
pathRewrite:{‘/api‘:‘‘}
}
}
也可以使用中间件webpack-dev-middleware
let webpack = require("webpack")
let middle = require("webpack-dev-middleware");
let compiler = webpack(config);
app.use(middle(complier));
resolve 解析第三方包
resolve:{
modules:[path.resolve(‘node_moduels‘)],
extensions:[‘.js‘,‘.css‘,‘.json‘],//配置默认查看文件后缀名 import index from ‘index‘
alias:{
bootstrap:‘bootstrap/dist/css/bootstrap.css‘,//设置别名
}
}
定义环境变量
plugins:[
new webpack.DefinePlugin({
DEV:JSON.stringify(‘development‘),//console.log(DEV)
PRO:‘production‘ //console.log(‘production‘)如果写字符串的话,需要加引号才能获取到
})
]
区分不同环境
let merge = require("webpack-merge");
let base = require(‘./webpack-base.js‘);
module.exports = merge(base,{ //前面是引入的,后面是各自自定义的
mode:‘development‘,
});
noParse 不去解析jquery的依赖库,提升打包速度
noParse:/jquery/
IgnorePlugin
忽略打包中某些包的某些文件不需要打包进去
plugins:[
new webpack.IgnorePlugin(/.locale/,/moment/)
]
以上是关于webpack4知识汇总2的主要内容,如果未能解决你的问题,请参考以下文章