注意:接上一篇文章《一、webpack4.0基础篇》
六、转化es6语法
本节来看一下,怎么在webpack中处理js模块。
我们需要把ES6转换成ES5语法。
安装:
npm install babel-loader @babel/core @babel/preset-env -D
@babel/preset-env就是用来把ES6转换成ES5语法的。
src/index.js:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6语法
let fn = () => {
console.log('log') // log
}
fn()
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 对单独抽离出来的main.css进行压缩时,
// 使用到了optimize-css-assets-webpack-plugin插件
// 因此需要加一个优化项配置
optimization: {
minimizer: [
// 对生成的bundle.js进行压缩
new UglifyJsPlugin({
cache: true,
// 并发打包,一起压缩多个。
parallel: true,
sourceMap: true
}),
// 对抽离出来的main.css进行压缩
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽离出来的文件叫 main.css
filename: 'main.css',
})
],
module: { // 模块
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader,需要把ES6转换成ES5语法
options: {
presets: [
// @babel/preset-env 就是用来将ES6转化成ES5语法的
'@babel/preset-env'
]
}
}
},
// 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/,
use: [
// 把样式都抽离成一个单独的css文件,叫main.css
MiniCssExtractPlugin.loader,
// 给CSS3语法,比如transfrom加上前缀。
// 需要新建 postcss.config.js 配置文件
// 需要引用 autoprefixer 这个插件
'css-loader',
'postcss-loader'
]
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'sass-loader' // 把scss转变为css
]
},
{
// 找到所有的.styl文件
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'stylus-loader' // 把stylus转变为css
]
}
]
}
}
运行:
npm run dev
浏览器成功打印出 'log'。
七、处理js语法及校验
1、将ES7的语法(ES7中的类)转换成ES5语法
需要用到 @babel/plugin-proposal-class-properties 这个插件。
安装:
npm install @babel/plugin-proposal-class-properties -D
在 webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 对单独抽离出来的main.css进行压缩时,
// 使用到了optimize-css-assets-webpack-plugin插件
// 因此需要加一个优化项配置
optimization: {
minimizer: [
// 对生成的bundle.js进行压缩
new UglifyJsPlugin({
cache: true,
// 并发打包,一起压缩多个。
parallel: true,
sourceMap: true
}),
// 对抽离出来的main.css进行压缩
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽离出来的文件叫 main.css
filename: 'main.css',
})
],
module: { // 模块
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
loader: 'babel-loader',
// 用babel-loader,需要把ES6转换成ES5语法
options: {
// 这是一个大插件的集合
presets: [
// @babel/preset-env 就是用来将ES6转化成ES5语法的
'@babel/preset-env'
],
// 我们还需要配置一些小插件
plugins: [
// 将ES7语法转换成ES5语法
'@babel/plugin-proposal-class-properties'
]
}
}
},
// 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/,
use: [
// 把样式都抽离成一个单独的css文件,叫main.css
MiniCssExtractPlugin.loader,
// 给CSS3语法,比如transfrom加上前缀。
// 需要新建 postcss.config.js 配置文件
// 需要引用 autoprefixer 这个插件
'css-loader',
'postcss-loader'
]
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'sass-loader' // 把scss转变为css
]
},
{
// 找到所有的.styl文件
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'stylus-loader' // 把stylus转变为css
]
}
]
}
}
src/index.js:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6语法
let fn = () => {
console.log('log')
}
fn()
// 这是ES7的语法
// 需要使用到 @babel/plugin-proposal-class-properties 这个插件
class A {
a = 1;
}
let a = new A()
console.log(a.a) // 1
运行:
npm run dev
浏览器成功打印出:1
2、将ES7中的类的装饰器,转换成ES5语法
ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件
先使用 @babel/plugin-proposal-decorators,然后再使用 @babel/plugin-prosopal-class-properties
安装:
npm install @babel/plugin-proposal-decorators -D
在src/index.js中写类的装饰器:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
// ES6语法
let fn = () => {
console.log('log')
}
fn()
// 这是ES7的语法
// ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
// 而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件
@log // 类的装饰器
class A {
a = 1;
}
let a = new A()
console.log(a.a) // 1
function log (target) {
console.log(target, '23')
}
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
// path是node的内置模块,所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 对单独抽离出来的main.css进行压缩时,
// 使用到了optimize-css-assets-webpack-plugin插件
// 因此需要加一个优化项配置
optimization: {
minimizer: [
// 对生成的bundle.js进行压缩
new UglifyJsPlugin({
cache: true,
// 并发打包,一起压缩多个。
parallel: true,
sourceMap: true
}),
// 对抽离出来的main.css进行压缩
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js&