webpack学习之路(二):

首先，我有个疑问的问题，想在这记录一下，
npm install moduleName --save 和 npm install moduleName --save-dev,
中的–save and --save-dev有什么区别：

  npm install-save moduleName -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
  
  npm install-save-dev moduleName -save-dev 的意思是将模块安装到项目目录下，并在package文件的
  devDependencies节点写入依赖。

npm中文官网:
https://www.npmjs.cn/

看了很多朋友的文章也才明白了。

npm install moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令
4. 安装模块到全局，不会在项目node_modules目录中保存模块包。
5. 不会将模块依赖写入devDependencies或dependencies 节点。
6. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令
7. 安装模块到项目node_modules目录下。
8. 会将模块依赖写入dependencies 节点。
9. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4：运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令
10. 安装模块到项目node_modules目录下。
11. 会将模块依赖写入devDependencies 节点。
12. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
13. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

1:devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。
2:像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

一：webpack - babel篇
这是在一个vue项目中用到的babel配置项，我们先来看看每个配置项是什么意思

"devDependencies": {
    //babel核心，Babel 的核心功能包含在 @babel/core 模块中：
    //npm install --save-dev @babel/core
	"babel-core": "^6.22.1",
	//按照eslint严格模式
	"babel-eslint": "^8.2.1",
	"babel-helper-vue-jsx-merge-props": "^2.0.3",
	"babel-jest": "^21.0.2",
	//转义 js 文件代码的 loader
	"babel-loader": "^7.1.1",
	//以下是babel插件
	"babel-plugin-dynamic-import-node": "^1.2.0",
	"babel-plugin-syntax-jsx": "^6.18.0",
	"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
	"babel-plugin-transform-runtime": "^6.22.0",
	"babel-plugin-transform-vue-jsx": "^3.5.0",
	
	"babel-preset-env": "^1.3.2",
	"babel-preset-stage-2": "^6.22.0",
	//babel的工具register
	"babel-register": "^6.22.0",
}

@babel-preset-env 就整合了这些语法转义插件：

Using plugins:
transform-template-literals {}
transform-literals {}
transform-function-name {}
transform-arrow-functions {}
transform-block-scoped-functions {}
transform-classes {}
transform-object-super {}
//...

但是如果是自己的项目，没有通过脚手架安装,需要安装这些也可以使用了：

  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-decorators": "^7.1.6",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/runtime": "^7.1.5",
    "babel-loader": "^8.0.4",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  }

二：package.json配置文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js --mode development"
  },

--mode 模式 (必选，不然会有 WARNING)，是 webpack4 新增的参数选项，默认是 production

--mode production 生产环境

提供 uglifyjs-webpack-plugin 代码压缩
不需要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }) 默认 production

默认开启 NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors, 编译出错时跳过输出，以确保输出资源不包含错误
默认开启 ModuleConcatenationPlugin -> optimization.concatenateModules, webpack3 添加的作用域提升(Scope Hoisting)

--mode development 开发环境

使用 eval 构建 module, 提升增量构建速度
不需要定义 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }) 默认 development

默认开启 NamedModulesPlugin -> optimization.namedModules 使用模块热替换(HMR)时会显示模块的相对路径

添加了 scripts 之后，新建src/index.js，然后执行npm run build ，你就会发现新增了一个 dist 目录
里边存放的是 webpack 构建好的 main.js 文件。

ps: npm scripts 使用指南
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

灵感来源：
https://www.jianshu.com/u/1b52b7c58216