阅读 71

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

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

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

安装依赖

$ yarn add -D webpack-merge
复制代码

调整目录结构

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

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中的文件引用路径,因为它的位置改变了

获取代码

文章分类
前端
文章标签