webpack配置文件分离（补充）

来源：99网

为什么？因为在开发时依赖一个配置文件，真正发布时依赖另一个配置文件

1. 丑化js文件的代码

2. 配置本地服务器的代码

devServer:{

        contentBase:'./dist',

        inline:true

    }

再在build文件夹中建立：dev.config.js（开发时依赖的文件）

prod.config.js（生产时依赖的文件）

注意：在base中存在的依赖，dev和prod中则不需要存在

为了能使三个文件合并，我们需要安装-->npm install webpack-merge --save-dev

// dev.config.js--针对开发时依赖

const webpackMerge=require("webpack-merge");
const baseConfig=require('./base.config'); 

module.exports=webpackMerge(baseConfig,{
    devServer:{
        contentBase:'./dist',
        inline:true
    }
});

// prod.config.js--针对生产时依赖
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const webpackMerge=require("webpack-merge");
const baseConfig=require('./base.config'); 

module.exports=webpackMerge(baseConfig,{
    plugins:[
        new UglifyjsWebpackPlugin()
    ]
});

修改package.json中的scripts

 "build": "webpack --config ./build/prod.config.js",

 "dev": "webpack-dev-server --open --config ./build/dev.config.js"

指定路径

注意：需要修改base.config.js中的output路径

path:path.resolve(__dirname,'dist')---> path:path.resolve(__dirname,'../dist')

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

全部频道

webpack配置文件分离（补充）