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-map
devtool配置
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等
删除未引用的js
tree shaking
通过 package.json 的 "sideEffects" 属性，来实现将文件标记为 side-effect-free(无副作用)

{
    "sideEffects": false
}

babel

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