玖叶教程网

javascript现在更新的比较快，很多新的语法在浏览器中不一定兼容，因此我们需要利用babel来处理这个问题，将对应的js语法翻译成浏览器可识别的。

npm i babel-loader @babel/core @babel/preset-env -D

npm i core-js regenerator-runtime

同时此次我把.browserslistrc和.eslintrc.js从package.json中提取了出来。

.browserslistrc文件的配置如下：

> 1%
last 2 versions
not ie <= 8

.eslintrc.js的配置如下：

module.exports = {
  "extends": "airbnb-base",
  "rules": {
    "import/extensions": "off",
    "no-console": "off"
  }
}

babel.config.js的配置如下：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false,
      useBuiltIns: 'usage',
      corejs: { version: '3.10', proposals: true }
    }]
  ],
}

webpack.config.js的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html
const miniCssExtractPlugin = require('mini-css-extract-plugin');//分离样式
const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');//压缩css
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.(jpg|jpeg|png|gif)$/,
        loader: "url-loader",
        options: {
          limit: 1024 * 10,
          outputPath: 'imgs',
          publicPath: './imgs',
          esModule: false
        }
      },
      {
        test: /\.(htm|html)$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        test: /\.(eot|woff|ttf|svg)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'fonts',
          publicPath: './fonts'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'eslint-loader',
            options: {
              fix: true//自动修复
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/assets/index.html',
      hash: true,
      filename: 'index.html',
      favicon: './src/assets/favicon.ico'
    }),
    new miniCssExtractPlugin({
      filename: 'index.css'
    }),
    new cssMinimizerWebpackPlugin()
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'dist'),//打包后的文件路径
    open: true,//自动打开浏览器
    compress: true,//启动gzip压缩
    port: 3000,//端口号
  },
  target: ['web', 'es5']
}

package.json的配置如下：

{
  "name": "wpk5-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "npx webpack serve",
    "build": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "core-js": "^3.10.0",
    "regenerator-runtime": "^0.13.7"
  }
}

注：因为optimize-css-assets-webpack-plugin的作者说这个插件不适合在webpack5中使用，因此我们换成了另外一个插件css-minimizer-webpack-plugin来压缩css。

git仓库地址：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.10/