前端工程化

初始化项目目录

mkdir xiamiaomiao
cd xiamiaomiao
npm init -y
atom .

Browserslist

配置

# .browserslistrc
> 1%
last 2 versions
not dead
not ie 11

EditorConfig

配置

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
tab_width = 2

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Babel

安装

npm i -D @babel/core @babel/cli @babel/preset-env
npm i core-js@3 regenerator-runtime

配置 babel.config.js

// babel.config.js
const presets = [
  [
    '@babel/preset-env',
    {
      useBuiltIns: 'usage',
      corejs: 3
    }
  ]
]

const plugins = []

module.exports = {
  presets,
  plugins
}

// package.json
"scripts": {
  "babel": "babel ./src/app.js -o ./dist/app.compiled.js"
}

执行

npm run babel

ESLint

安装

npm i -D eslint@7

配置

npx eslint --init

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
  }
}

# .eslintignore
src/libs/*
src/assets/*

// package.json
"scripts": {
  "lint": "eslint src"
}

执行

npm run lint

Webpack

安装

npm i -D webpack webpack-cli webpack-dev-server webpack-merge
npm i -D babel-loader style-loader css-loader
npm i -D html-webpack-plugin mini-css-extract-plugin css-minimizer-webpack-plugin eslint-webpack-plugin

配置

// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    clean: true,
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/
        }
      }
    }
  }
}

// webpack.prod.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = merge(common, {
  mode: 'production',
  output: {
    publicPath: ''
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ],
  optimization: {
    minimizer: [
      '...',
      new CssMinimizerPlugin()
    ]
  }
})

// webpack.dev.js
const path = require('path')
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
    historyApiFallback: true,
    client: {
      overlay: true
    }
  },
  output: {
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, 'src'),
      exclude: [
        path.resolve(__dirname, 'src/libs'),
        path.resolve(__dirname, 'src/assets')
      ]
    })
  ]
})

// package.json
"scripts": {
  "build": "webpack --config ./webpack.prod.js",
  "serve": "webpack serve --config ./webpack.dev.js --open"
}

执行

npm run build
npm run serve

package.json

最后项目的 package.json 文件如下：

{
  "name": "xiamiaomiao",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "babel": "babel ./src/app.js -o ./dist/app.compiled.js",
    "lint": "eslint src",
    "build": "webpack --config ./webpack.prod.js",
    "serve": "webpack serve --config ./webpack.dev.js --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.2.0",
    "eslint-webpack-plugin": "^3.1.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "core-js": "^3.22.0",
    "regenerator-runtime": "^0.13.9"
  }
}