使用typescript与webpack搭建开发环境(四)

如何区分开发环境与生成环境

上一章讲了开发环境`devtool`的使用，但是官方推荐不同的环境使用不同的配置，那么怎么来区分当前运行的是什么环境呢，这次讲一下这个。

安装依赖

$ yarn add -D webpack-merge

调整目录结构

增加config文件夹，将webpack.config.js文件移动到里面，保留基础配置，删除mode和devtool属性

在config文件夹中增加webpack.conf.dev.js，写入以下内容

const merge = require('webpack-merge');
const common = require('./webpack.config.js');
let devConfig = {
    mode: "development",
    devtool: 'source-map',
};
module.exports = merge.merge(common, devConfig);

修改package.json

"scripts": {
   "start": "webpack serve --config config/webpack.conf.dev.js"
 },

执行 yarn start

最后

不同的环境创建不同的webpack.conf.xxx.js即可

注意修改webconfig.conf.js中的文件引用路径，因为它的位置改变了