webpack成神之路（三）

2019-05-12 本文已影响13人 AAA前端

现在我们来处理js模块，比如es6语法转换为es5语法。这里就需要babel-loader模块了。https://www.npmjs.com/package/babel-loader

安装 cnpm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js中配置

image.png
把模式改为development, 在index.js中使用箭头函数

image.png
npm run build可以看到打包后的js中箭头函数转换为es5了；
image.png

现在我们使用es6里面的 class

image.png

直接就报错了，需要配置@babel/plugin-proposal-class-properties

image.png
我们到babel官网搜索这个插件，https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
然后按官网说的安装 npm install --save-dev @babel/plugin-proposal-class-properties
安装好之后，webpack.config.js中按官方配置

image.png

页面控制台正常打印了

image.png

现在我们要给class 类添加 @log 装饰器

image.png

又报错提示需要装饰器。
我们去babel 官网搜索decorators https://babeljs.io/docs/en/babel-plugin-proposal-decorators#class-decorator

image.png
直接看过来，放到webpack.config.js中。
安装 cnpm install --save-dev @babel/plugin-proposal-decorators
运行代码然后控制台打印出来了

image.png

现在我们在a.js中再定义一个类以及一个generator;让我们来看一下有什么需要改进的。

image.png

npm run build我们首先看打包后的js。看一下class的问题；在a模块有个函数_classCallCheck处理class，在index模块也有一个函数_classCallCheck处理class.
a.js
index.js
这里相同的函数没有提取出来，如果有很多个模块都拿会重复很多代码；
我们继续npm run serve启动页面。看一下控制台；告诉我们regeneratorRuntime is not defined
image.png
原因也是打包的时候对generator进行了转换，但是转换之后并没有这种帮助，所以报错。
我们开发环境安装 npm install --save-dev @babel/plugin-proposal-class-properties 以及生产环境需要的 cnpm install --save @babel/runtime。
我们把webpack里面的babel配置拿到根目录下，创建.babelrc；

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

image.png

现在启动服务，控制台不报错了，而且打包后也可以看到多了很多代码，就是把很多需要用的代码提出来了。

现在我们在index.js中使用es7语法 image.png

打包后发现includes语法没有转换 ,现在我们需要一个模块 cnpm install --save @babel/polyfill
在使用的js中引入

image.png
打包后可以在打包后的文件里看到，Array.protype上添加了includes方法，就可以兼容不支持es7语法的浏览器了

image.png

现在我们可以给我们的js添加语法规范eslint;

cnpm i --save-dev eslint eslint-loader安装
webpck.config.js中配置

image.png
其中注意一下enforce: 'pre'，意思是如果要匹配多个js时，先执行当前这个js的匹配。
然后打包，可以看到一些不符合eslint规范的代码，后面可以自己慢慢改。我们现在这个不是重点，先webpack中注释掉。

image.png
webpack.config.js


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',  // development production
    optimization: {
        minimizer: [new UglifyJsPlugin(
            {
                cache: true,  // 启用cache缓存
                parallel: true, // 并发打包
                sourceMap: true, // 映射原代码地址
              }
        ), new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    entry: './src/index.js', 
    output: {
        filename: "index.[hash:8].js",
        path: path.resolve(__dirname, 'build')  
    },
    devServer: {
        port: 8080, 
        contentBase: './', 
    },
    plugins: [  
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',  
            filename: 'index.html', 
            minify: {  
                removeAttributeQuotes: true,
                collapseWhitespace: true, 
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
          }),
    ],
    module: { // 模块
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'] 
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'less-loader']
            },
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     include: path.resolve(__dirname, 'src'),
            //     use:{
            //         loader: 'eslint-loader',
            //         options:{
            //             enforce: 'pre'  // pre匹配到的js先执行   post后执行 
            //         }
            //     }
            // },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                use: {
                  loader: 'babel-loader',
                //   options: {
                //     presets: ['@babel/preset-env'],
                //     "plugins": [
                //         ["@babel/plugin-proposal-decorators", { "legacy": true }],
                //         ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                //       ]
                //   }
                }
              }

        ]
    }
}

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

webpack成神之路（三）

猜你喜欢

热点阅读