Webpack和Babel
Babel
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']
})
]
};