webpack -- 完整入门学习笔记（七）

一、环境配置

webpack在运行时可以根据运行环境的不同，可以操作不同的文件等，一般来说环境又开发环境和生产环境，而有可能公司事多弄个测试环境 在node里面可以全局通过NODE_ENV来获取当前运行环境，从而进行不同的编译 获取环境的代码process.env.NODE_ENV 配置环境的方式有多种，这里个人知识有限，只列知道的三种方式

1、mode

通过mode来配置环境，不过这个又分为两种，一种是重新建文件配置，需要merge插件配合，一种就是在package.json的npm scripts里面配置，这个可以新建文件，也可以不建，通过判断环境配置不同的配置新建文件 新建webpack.prod.config.js和webpack.dev.config.js，两个文件里面的初始配置差不多

const merge = require('webpack-merge') const common = requrie('./webpack.common.js') module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist' } })

devServer是开发环境配置项，这个下一节将devtool这是是编译工具，开发环境是inline-source-map，生产环境是source-mapdevtool配置package.json 这个就是在不同的命令中配置

"build": "webpack --mode=production --config webpack.config.js" "dev": "webpack-dev-server --mode-development --config webpack.config.js"

通过这个方式可以在webpack.config.js里面通过process.env.NODE_ENV来判断当前环境

2、env-cross

这个是大佬那里学来的，需要安装cross-env模块安装

npm install cross-env --save-dev

配置 这个依旧需要在package.json里面配置，跟上面是差不多的

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpck.config.js"

3、环境文件

根据不同的环境，运行不同的环境文件，来实现环境配置，这个一般还需要另外一个工具配合webpack.dev.config.js 这个就是开发环境的webpack配置文件，可以在这里面写开发环境需要的东西

const merge = require('webpack-merge') const common = requrie('./webpack.common.js') module.exports = merge(common, { devtool: 'inline-source-map', devServer: { contentBase: './dist' } })

webpack.prod.config.js 这个是生产环境的webpack配置文件，可以在这里面写生产环境需要的东西

const merge = require('merge') const common = require('./webpack.common.js') const webpack = require('webpack') const UglifyJSPlugin = require('uglifyjs-webpack-plugin') module.exports = merge(common, { devtool: 'source-map', plugins: [ new UglifyJSPlugin({ sourceMap: true }), new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify('production'), // 这个在上面那个文件应该也配置一个 }) ] })

配置完成上面的两个环境文件后，在package.json文件里面对npm scripts也要进行配置修改，根据环境不同，加载不同的环境文件

"build": "webpack --config webpack.prod.js", "start": "webpack-dev-server --open --config webpack.dev.js"

在上面文件中，webpack.common.js为webpack公共配置，所有共用的配置项都写在这个文件里面

二、开发环境

开发工具根据官网有三种，至于彼此的使用，太多了，懒得写开发环境 开发环境需要在webpack中配置开发工具配置项devServer配置项

devServer: { publicPath: '', // bound存放的公共路径 contentBase: '', // 输出展示的文件来源 overlay: {} || '', // 警告或报错提示 hot: Boolean, // 热模块功能 host: '', // host port: , // 要监听的端口号 proxy: { "/api": { target: url, changeOrigin: true, pathRewrite: { "^/api": url } } }, // 配置代理服务器，跨域用 }

Tips 热模块功能必须还要配置两个webpack的内置插件才能运行

new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()

三、生成环境

生产环境 生成环境要求文件小，加载快，所以一般需要处理很多东西，比如压缩，删除console，debugger，删除未引用的js等删除未引用的jstree shaking 通过 package.json 的 "sideEffects" 属性，来实现将文件标记为 side-effect-free(无副作用)

{ "sideEffects": false }

babel

Tips 测试了一下，发现在npm scripts里面配置环境，无法通过process.env.NODE_ENV获取，得到的是个undefined，希望有大佬能够指导一下

转载于:https://www.cnblogs.com/zjh-study/p/10863873.html

相关资源：Solidity-以太坊区块链-Truffle-webpack-开发入门 (一) 环境配置