webpack如何编译ES6打包

前言：随着ES的普及咱们愈来愈多的开始使用ES6的语法了，固然也随着mvvm框架的流行少不了js模块化，那js模块化又有那些呢

在很早的时候你们都用的命名空间，如今也有人用（库名.类别名.方法名）

后来出现了CommonJS、AMD、CMD、UMD，如今流行ES 6 module

CommonJS的基本介绍：

一个文件为一个模板，经过module.exports暴露模块接口，经过require引入模块，同步执行

规范：http://wiki.commonjs.org/wiki/Modules/1.1.1

AMD的基本介绍：

 全称：Async Module Definition，使用define定义模块，使用require加载模块，经常使用库RequireJS，依赖前置、提早执行

规范：https://github.com/amdjs/amdjs-api/wiki/AMD

CMD的基本介绍：

 全称：Common Module Definition，一个文件作为一个模块，使用define来定义一个模块、使用require来加载一个模块，表明做SeaJS，尽量地懒执行

规范：https://github.com/cmdjs/specification/blob/master/draft/module.md

 UMD的基本介绍：

全称：Universal Module Definition

叫作通用解决方案，基本三个步骤：判断是否支持AMD、是否支持CommonJS、若是都没有使用全局变量

ES6 M 基本介绍：

全称：EcmaScript Module

一个文件一个模块，export/import

那Webpack支持哪些打包呢？

AMD(RequireJS)，ES Modules（推荐的），CommonJS，经常使用的就是后两种

-----------------------下面开始-------------------------------

环境准备：node npm webpack

第一步安装webpack：cmd里执行   npm install webpack -g

个人如今装的是最新版4.31版本

若是版本低的能够先uninstall再安装

 webpack的核心是：Entry、Output、Loaders、Plugins都在webpack.config.js文件里配置

 Entry：代码的入口，也是打包的入口，能够是单个，也能够是多个

Output：打包成的文件，也能够是一个或多个

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js', //这里[]里的name就是app和search也就是entry里的key值
    path: __dirname + '/dist'
  }
};

// 写入到硬盘：./dist/app.js, ./dist/search.js

Loaders：loader 让 webpack 可以去处理其余类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

注意：loader 可以 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其余打包程序或任务执行器的可能并不支持。

在更高层面，在 webpack 的配置中 loader 有两个属性：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪一个 loader。

module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }

Plugins：插件则能够用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。多数插件能够经过选项(option)自定义。你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new 操做符来建立它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 经过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

在上面的示例中，html-webpack-plugin 为应用程序生成 HTML 一个文件，并自动注入全部生成的 bundle。

 

webpack打包能够有什么方式：1.命令   2.配置   3.第三方脚手架

最简单的打包命令：

webpack app.js file.js            //app.js是入口文件      file.js是打包后的文件

使用配置：

在你须要打包的项目文件夹下建一个webpack.config.js配置代码以下

module.exports = {
  entry: {
    app: './app.js',
  },
  output: {
    filename: '[name].[hash:5].js', //这里[hash:5]会随机生成一个版本号做为你的打包js版本
  }
};

而后在当前目录下执行：webpack　　　　//就能够直接打包了

-------------------

打包都是很简单的，那下面就是最关键的webpack如何编译ES6/7的语法呢

这里咱们就要用到Babel，执行下面两条命令安装babel-loader和preset（preset主要的做用就是指定咱们的babel-loader打包成咱们想要的样子，preset能够进行配置）

npm install babel-loader@8.0.0-beta.0 @babel/core

npm install @babel/preset-env --save-dev

怎么配置preset？以下在webpack.config.js文件里

再介绍两个重要插件，对编译es6/7的语法很重要

安装插件：

npm install babel-polyfill  --save

Babel Polyfill：表示全局垫片，各个浏览器对标准的实现不同，用这个工具就能够统一方法，为应用准备的

 

安装插件：

npm install @babel/runtime --save

npm install @babel/plugin-transform-runtime --save-dev

Babel Runtime Transform：局部垫片，为开发框架作准备的

怎么使用呢？

在webpack.config.js的文件同目录下建一个.babelrc文件就是json

把webpack.config.js文件里options下的presets剪切到.babelrc文件里

{
	"presets": [
		["@babel/preset-env", {
			"targets": {
				"browsers": ["> 1%", "last 2 versions"]
			}
		}]
	],
	"plugins": ["@babel/transform-runtime"]
}

　　这里要用标准的json数据格式

这时候就能够在cmd里执行：webpack

 无论你js里用了什么的es6语法最后都会打包编译成浏览器能够识别的js方法