码迷,mamicode.com
首页 > Web开发 > 详细

webpack4知识汇总2

时间:2020-05-03 12:46:34      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:target   trap   get   require   use   ports   eve   merge   proxy   

跨域

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

标签:target   trap   get   require   use   ports   eve   merge   proxy   

原文地址:https://www.cnblogs.com/cyany/p/12821130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!