#### webpack  - node.js是服务执行环境，webpack工具是基于Node运行的； - webpack在执行打包压缩的时候是依赖nodejs的； - npm是 node.js的一个模块，用于安装各种开发工具以及文件。 [webpack4.x开发环境配置](https://blog.csdn.net/u012443286/article/details/79504289) [简要理解CommonJS规范](https://blog.csdn.net/u012443286/article/details/78825917) [ES6模块的import和export用法总结](https://www.cnblogs.com/dupd/p/5951311.html) #### package.json的配置： ~~~ "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 --mode development" }, ~~~ - **“cross -env“”** 在苹果环境下我们配置生产环境，一般直接写NODE_ENV-production 就可以，而在window环境下我们还要加一个前缀set 为了方便在两个环境下都能跑，我们安装了cross-env插件，然后在package.json引入该插件就可以在两个环境上跑了 - 我们使用webpack跑的环境有生产环境和开发环境，生产环境不需要那些报错，而开发环境需要一些警告以及报错，为了区分生产环境和开发环境，我们需要在指令上写上这个是生产环境还是开发环境的 - --mode development 代表开发环境 - --mode production 代表生产环境 - 默认情况下跑的都是生产环境，生产环境下跑webpack-dev-server，热加载的时候，更新html数据时会反复生产dom节点，而开发环境不会出现这种情况。 - NODE_ENV表示环境变量，我们在开发环境给他赋值为development,生产环境赋值为production, 为了方便我们在配置webpack.config.js根据NODE_ENV参数做不同的配置，适应各种环境。 - 在webpack.config.js我们只需要使用process.env 加变量名就可以取出当前的变量； ~~~ const isDev = process.env.NODE_ENV === 'development'; ~~~