Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码 官网：https://babeljs.io/
Babel编译的结果
(1)Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
(2)对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
(3)Babel 一般需要配合 Webpack 来编译模块语法
使用Babel的准备工作
(1)安装node环境
(2)检测是否安装成功 node -v 和 npm -v
(3)初始化项目 npm init
(4)安装babel需要的包 npm install --save-dev @babel/core @babel/cli 和 npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5
使用Babel编辑的操作步骤
1、在 package.json 文件中添加执行编译的命令
"scripts": {
"build": "babel src -d dist"
},2、安装转换的插件 npm install @babel/preset-env@7.11.0 --save-dev
3、Babel 的配置文件 .babelrc
4、执行编译命令 npm run dev
Webpack
了解Webpack
(1)webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件
(2)webpack 可以处理 js/css/图片、图标字体等单位
(3)动态的内容，webpack没办法处理，只能处理静态的(开发过程中存在于本地的 js/css/图片/图标字体等文件)
webpack初体验操作步骤
(1)初始化项目 npm init
(2)安装 webpack 需要的包
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
(3)配置 webpack，需要创建webpack.config.js文件
const path = require('path');module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}};(4)修改package.json文件
"scripts": {
"webpack": "webpack --config webpack.config.js"
},编译并测试 npm run webapck
entry 和 output 指定出入口文件
(1)可以指定单入口，也可以指定多入口
(2)同样的可以指定单出口，也可以指定多出口
// webpack.config.js 文件配置示例const path = require('path');module.exports = {
mode: 'development',
// entry: './src/index.js',
// entry: {
// main: './src/index.js',
// search: './src/search.js'
// },
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'bundle.js'
// }
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}};loader
loader 让 webpack 能够去处理那些非 JS 文件的模块
(1)以babel-loader为例
1）安装babel-loader npm install --save-dev babel-loader@8.1.0
2）安装 Babel npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
3）创建Babel 的配置文件 .babelrc
// 创建配置文件 .babelrc，并配置
{
"presets": ["@babel/preset-env"]
}4）引入 core-js 编译新增 API npm install --save-dev core-js@3.6.5
// js文件中引入import 'core-js/stable';
5）配置webpack.config.js文件
const path = require('path');module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}6）打包并测试 npm run webpack
plugins
** 插件, loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务
以html-webpack-plugin插件为例
1、作用
（1）可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
（2）为html文件中引入的外部资源， 如：script、link
2、操作步骤
（1）安装插件 npm install --save-dev html-webpack-plugin@4.3.0
（2）配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',// entry: {// index: './src/index.js'// },entry: {index: './src/index.js',search: './src/search.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js'},plugins: [// 单入口// new HtmlWebpackPlugin({// template: './index.html'// })// 多入口new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['index'],
minify: {
// 删除 index.html 中的注释
removeComments: true,
// 删除 index.html 中的空格
collapseWhitespace: true,
// 删除各种 html 标签属性值的双引号
removeAttributeQuotes: true
}}),new HtmlWebpackPlugin({
template: './search.html',
filename: 'search.html',
chunks: ['search']})]};作者：大风车呀大风车
链接：https://www.jianshu.com/p/539c5755d311
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
