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的主要内容,如果未能解决你的问题,请参考以下文章

webpack4常用片段

webpack4的知识总结

android小知识点代码片段

关于webpack4的14个知识点,童叟无欺

从基础到实战 手把手带你掌握新版Webpack4.0

从基础到实战 手把手带你掌握新版Webpack4.0