一、webpack4.0基础篇2

注意：接上一篇文章《一、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', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [has