一、设置环境变量标识 现在是开发环境还是正式环境  

涉及的包  cross-env

配置  cross-env NODE_ENV=production        cross-env NODE_ENV=development

"scripts": {

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

  },

webpack.config.js中的配置

const isDve = process.env.NODE_ENV === 'development'

if(isDve) {

    config.devServer = {

        port: 8000,

        host: '0.0.0.0',

        overlay: {

            errors: true,

        }

    }

}

二、html-webpack-plugin 插件  

webpack.config.js中的配置

const {VueLoaderPlugin} = require('vue-loader')

plugins: [

        new HTMLPlugin()

    ]

三、判断环境、区分打包

const { webpack } = require('webpack')

package.json按照视频课程修改版本

并且

查看评论后一个一个自己尝试，得到可以运行的版本

{

  "name": "vue-todo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "cross-env": "^5.1.3",

    "css-loader": "^0.28.7",

    "file-loader": "^1.1.6",

    "html-webpack-plugin": "^2.30.1",

    "style-loader": "^0.19.1",

    "stylus": "^0.54.5",

    "stylus-loader": "^3.0.1",

    "url-loader": "^0.6.2",

    "vue": "^2.5.13",

    "vue-loader": "^13.6.0",

    "vue-template-compiler": "^2.5.13",

    "webpack": "^3.1.0",

    "webpack-dev-server": "^2.9.1"

  },

  "devDependencies": {

    "webpack-dev-server": "^2.9.1"

  }

}

        // // 2.2以下版本（2.1-） plugins要写在module.exports.module里面

        // plugins: [

        //     new HtmlWebpackPlugin({

        //         template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        //     })

        // ],

    },

    //2.2+以上版本 plugins要写在module.exports.module外面(即module.exports里面)

    plugins: [

        new HtmlWebpackPlugin({

            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        })

    ],

原文链接：https://blog.csdn.net/jiajia199470/article/details/77100466

hot: true 配置项,能实现页面中 某个组件的刷新,避免测试时候,页面其它数据消失.

webpack-dev-server

1、cross-env 兼容不同的平台，设置环境变量

"build":"cross-env NODE_ENV=production webpack --config webpack.config.js"

2、组件更新，页面只重新渲染组件的

config.devServer = {

    port:"8000",

    ...

    hot:true

}

// 添加新插件

config.plugins.push(

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin()

)

npm i html-webpack-plugin

npm i cross-env

webpac4 官方文档提示，当在devServer中启用hot时，webpack会自动添加 webpack.HotModuleReplacementPlugin

NoEmitOnErrorsPlugin

在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。对于所有资源，统计资料(stat)的 emitted 标识都是 false。

这里打错了，应该是：historyApiFallback

文档：

https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback

webpack4 不需要 使用 webpack.DefinePlugin定义 process.env.NODE_ENV

使用--mode参数配置即可

webpack4 添加了 mode 参数，使用 

webpack --mode=production

会将 process.env.NODE_ENV 的值设为 development,这个值是用于在 代码中设置常量的，在webpack.config.js中读取不到。

如果需要在webpack.config.js中判断环境，就需要使用crossenv在script上添加环境变量参数。

1. 使用cross-env插件来配置环境变量

2. package.json中配置的环境变量NODE_ENV保存在process.env中

1. 使用cross-env插件来配置环境变量

2. package.json中配置的环境变量NODE_ENV保存在process.env中
   

热加载：修改代码时页面不会整个刷新，只更新数据

webpack博大精深  Mark一下 明天继续学习

npm i html-webpack-plugin

npm i cross-env

 webpack-dev-server

hot  只渲染改动部分，不会整个页面重新渲染

#cheap-module-eval-source-map

4. html-webpack-plugin  a.require进来插件 b.在plugins里new一下

5.在webpack里用一些vue,react等框架时要用 webpack.DefinePlugin，里边定义的process.env里的变量在webpack编译以及我们自己写代码时判断环境都去可以去调用，webpack在打包时会根据不同的环境变量去打包不同的代码版本

1.cross-env 不同平台上设置环境变量的方式不同，cross-env帮助不同平台写同样的代码就可以执行命令，eg: cross-env NODE_ENV=production (现在是mac写法，window应该写set 加上cross-env就可以帮助统一了)

2.process.env.NODE_ENV (启动脚本时设置的环境变量全部存在于process.env这个对象里)

3.    XXX.devServer={}

webpack.config.js配置文件是同时用于开发环境和正式环境，所以要根据环境来判断一些配置。判断就通过在package.json的scripts中，通过NODE_ENV来定义不同的环境变量。而cross-env包的作用就是，统一不同操作系统下定义环境变量的方法。

comnfig.devtool =  '#cheap-module-eval-source-map' 将vue的代码映射到页面上，从而达到调试页面的代码而修改对应的vue代码

devtool:方便在浏览器中调试代码

webpack.DefinePlugin:定义之后js中用到的常量

html-webpack-plugin:生成htnl并且将生成的js引入进去

cross-env:设置环境变量

dev server配置讲的很赞，webpack4中设置devserver之后不走output，dist保存在内存中，想生成的话切回生产环境