Webpack

package.json

{
  "name": "webpackexercise", //包名称
  "version": "1.0.0", //版本号
  "description": "",
  "main": "index.js", //包执行入口
  "scripts": { //自定义脚本命令功能
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

运行自定义命令： npm run命令名 //如 npm run test, npm run dev

npm更换淘宝镜像: npm config set registry https://registry.npm.taobao.org

npm install 参数：
-s(--save) 写入dependencies生产环境的依赖 ,npm版本5以上默认启用该参数
-d(--save-dev) 写入devDependencies开发环境的依赖
npm install时 dependencies 和 devDependencies 下的依赖都会被安装
npm install --only=dev //指定安装开发环境依赖
npm install --only=prod //指定安装生产环境依赖
包发布后，别人npm install只会安装dependencies下的依赖，因此dependencies一般
放功能相关依赖， devDependencies放本地开发相关依赖

语义化版本
^version:中版本和小版本
^1.0.1 -> 1.x.x
npm install时自动安装1.x.x中的最新版本
~version: 小版本
~1.0.1 -> 1.0.x
npm install时自动安装1.0 .x中的最新版本
version: 特定版本

npm install过程

• 寻找报版本信息文件(package.json)，依照它来进行安装
• 查找package.json中的依赖，并检查项目中其他的版本信息文件
• 如果发现了新包，就更新版本信息文件

package-lock.json
package-lock.json 是在 npm install时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号。
npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。

webpack.config.js

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

const path = require('path');
const uglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js', //如果不指定默认入口是 /src/index.js
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  devServer: { //对webpack-dev-server进行配置
  	port: 8000, //指定端口
  	publicPath: '/dist' //指定打包后的资源路径
  },
  module: {
  	resolve: {
  		extensions: ['.jsx', '.vue'] //指定哪些后缀可以省略
  	}
  	rules: [
      {
  	  	test: /\.css$/, //正则表达式规定哪种文件需要被处理
  	  	use : [
  	  		'style-loader', //style-loader根据样式生成标签插入文件
			'css-loader?minimize', //使用哪些loader处理,css-loader负责解析css文件
  	  	],
  	  	exclude: /node_modules/  //将node_modules排除在外
  	  	include: 
  	  }
  	]
  },
  plugins: [
  	new uglifyJSPlugin() //压缩文件
  ]
};

__dirname: 返回js所在文件夹的绝对路径
__filename: 返回被执行的 js 的绝对路径

webpack-dev-server:实时监控，当发生改变时动态打包。在打包时不会生成文件。

loader 文件加载器

Loader通过module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换

• loader需要手动安装
• use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序和配置顺序相反；
• 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的minimize 告诉 css-loader 要开启 CSS 压缩。

给 Loader 传入属性的方式除了有 querystring 外，还可以通过 Object 传入，以上的 Loader 配置可以修改为如下：

use: [
  'style-loader', 
  {
    loader:'css-loader',
    options:{
      minimize:true,
    }
  }
]

plugin

Webpack 是通过 plugins 属性来配置需要使用的插件列表的。 plugins 属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

babel

安装babel
npm install @babel/core @babel/cli -g
安装转换规则
npm install @babel/preset-env   //高版本es代码转换低版本

指定规则编译
babel src/index.js --presets=@babel/preset-env

在package.json中添加babel规则

"babel": {
	"presets": ["@babel/preset-env"] 
}

在.babelrc文件中配置babel规则

{
	"presets": ["@babel/preset-env"]
}

webpack.congif.js中

DLL