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/)
]

懒加载

使用@babel/plugin-syntax-dynamic-import插件

热更新

devServer:{
hot:true,//启动热更新
}
使用webpack.HotModuleReplacementPlugin() 热更新插件

如果需要查看热更新模块路径，使用webpack.NamedModulesPlugin()

资料reference:https://www.bilibili.com/video/BV1a4411e7Bz?p=27