preface

Recently I learned some webpack configuration, so I decided to build a simple VUE project by myself, instead of directly using vue-CLI tool to build. Vue-router and VUEX are not used in this project. Interested partners can add them by themselves

Realization of ideas and steps

  1. Create three configuration files: webpack.common.js (public configuration file), development configuration file (webpack.dev.js), and production configuration file (webpack.prod.js)
  2. Install webpack,npm install webpack webpack-cli webpack-dev-server webpack-merge -DWebpack-merge is used to merge two Webpack configuration files
  3. Install dependencies to compile CSS resource filesnpm install style-loader css-loader less-loader less -D
  4. Install js resource file dependenciesnpm install babel-loader @babel/core @babel/preset-env -D
  5. Install image resource file dependenciesnpm install file-loader url-loader -DThere is a slight problem here. When configuring loader, add the configuration option “esModule: false”, because vue uses commonJS syntax, while file-loader/url-loader uses ES Module syntax. Img SRC becomes “[object Module]” after vue-loader is processed.
  6. Install vUE resource file dependenciesnpm install core-js vue -S 和 npm install vue-loader vue-style-loader vue-template-compiler -D
  7. Install some functional plug-insnpm install clean-webpack-plugin copy-webpack-plugin html-webpack-plugin -D
  8. Now you can package and debug normally. Try adding some ESLint checking, routing, and vuex later.
  9. To use ESLint, install esLint firstnpm install eslint eslint-loader babel-eslint -DAfter the installation is complete, generate the esLint configuration file and run the following commandnpx eslint --init
  10. Configure module.rules for Webpack to set eslint-loader for JS and vue files
  11. Set the configuration file.eslinttrc.js for esLint
  12. Set esLint to ignore file.eslintignore

PS: Project address: github.com/blueSky1008…

The implementation process

  • webpack.common.js
// webpack.common.js 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin') // Used with vue-loader to compile conversion. Vue files
const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: './src/main.js'.output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [{test: /.vue$/,
        use: 'vue-loader'
      },
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader'.options: {
            presets: ['@babel/preset-env'}}}, {test: /.css$/,
        use: [ 'style-loader'.'css-loader'] {},test: /.less$/,
        use: [ 'style-loader'.'css-loader'.'less-loader'] {},test: /\.(png|jpe? g|gif)$/,
        use: {
          loader: 'url-loader'.options: {
            limit: 10 * 1024.// Resolve img SRC to become "[object Module]" after vue-loader processing
            esModule: false // esModule is not used because vue uses commonJS and file-loader/url-loader uses ES Module.}}},]},plugins: [
    new webpack.DefinePlugin({
      // The value requires a snippet of code
      BASE_URL: JSON.stringify(' ')}),new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: 'Create your own Webpack configuration file for vue'.template: './public/index.html'.minify: false.inject: true})],}Copy the code
  • webpack.dev.js
// webpack.dev.js 
const { merge } = require('webpack-merge') // to merge webpack configuration files
const webpack = require('webpack')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development'.devtool: 'cheap-module-eval-source-map'.devServer: {
    hot: true.// Enable webPack's module hot replace feature
    open: true.// Automatically open the browser
    contentBase: 'public'.// Static resource directory
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})
Copy the code
  • webpack.prod.js
// webpack.prod.js 
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
  mode: 'production'.plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: ['public']]}}))Copy the code
  • package.json
{
  "name": "webpack-vue-zero"."version": "0.1.0 from"."private": true."scripts": {
    "serve": "webpack-dev-server --config webpack.dev.js --open"."build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "core-js": "^ 3.6.5." "."vue": "^ 2.6.11." "
  },
  "devDependencies": {
    "@babel/core": "^ 7.12.3." "."@babel/preset-env": "^ 7.12.1"."@vue/cli-plugin-babel": "^ 4.5.8"."babel-loader": "^ 8.1.0"."clean-webpack-plugin": "^ 3.0.0"."copy-webpack-plugin": "^ 6.2.1." "."css-loader": "^ 5.0.0"."file-loader": "^ 6.1.1." "."html-webpack-plugin": "^ 4.5.0." "."less": "^ 3.12.2"."less-loader": "^ 7.0.2"."style-loader": "^ 2.0.0." "."url-loader": "^ 4.4.1"."vue-loader": "^ 15.9.3"."vue-style-loader": "^ 4.1.2." "."vue-template-compiler": "^ 2.6.12." "."webpack": "^ 4.27.1"."webpack-cli": "^ 3.1.2." "."webpack-dev-server": "^ 3.1.10"."webpack-merge": "^ 5.2.0." "
  },
  "browserslist": [
    "1%" >."last 2 versions"."not dead"]}Copy the code

Use Eslint to implement code style verification and checking

  • Module. rules added to webpack.common.js
// webpack.common.js
module.exports = {
	module: {
    	rules: [{test: /.(js|vue)$/,
              use: 'eslint-loader'.enforce: 'pre'.// Check before compiling
              exclude:/(node_modules)/}}}]Copy the code
  • Set the configuration file.eslinttrc.js for esLint
// .eslinttrc.js
module.exports = {
  root: true.// Tells ESLint to use this file as a configuration file and not write, just to locate the file directly
  env: {
    browser: true.// You can use browser environment variables
    node: true.// You can use node variables
    commonjs: true.// You can use the CommonJS specification
    es6: true
  },
  extends: [
    'plugin:vue/essential'.'standard' // rule templates for esLint].parserOptions: {
    ecmaVersion: 12.sourceType: 'module'.// Use es module
    parser: 'babel-eslint'.// EsLint's parser
    jsx: true / / open JSX
  },
  plugins: [
    'vue'].rules: {}}Copy the code
  • Set esLint to ignore file.eslintignore
/build/
/config/
/dist/
/static/
/*.js
Copy the code
  • Set the esLint execution command in package.json
{
  "name": "webpack-vue-zero"."version": "0.1.0 from"."private": true."scripts": {
    "lint": "eslint --ext .js,.vue src"."lintfix": "eslint --fix --ext .js,.vue src"}},Copy the code

The commands eslint — ext. js,.vue SRC –ext are used to specify which directory to execute esLint in.js, and.vue is used to specify which files to execute eslint SRC is the folder name

–fix: ESLint fixes some problems automatically, and developers fix the rest manually