The first isvueProject Structure Directory

Reference the component HelloWorld.vue in app.vue

Initialize the required modules

1. Installwebpack webpack-cli 

npm install --save-dev webpacak webpack-cli 
yarn add webpack webapck-cli --dev 
Copy the code

At this time, error will be reported when compiling and starting, and other modules need to be installed, as follows:

npm install vue vue-loader vue-template-compiler less less-loader css css-loader style-loader file-loader --save-dev

yarn add vue vue-loader vue-template-compiler less less-loader css css-loader style-loader file-loader --dev
Copy the code

In 2.webpack.config.jsThe use ofCommonJsSpecification configuration entry and output locations, as in this articlewebpack.common.js:

const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin') const vueLoaderPlugin = Module. exports = {mode: 'none', entry: './src/main.js', output: { filename: 'bundle.js', path: path.join(__dirname, './dist') }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // enable CSS Modules modules: false, } } ] }, { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { strictMath: true, }, } } ] }, { test: /\.(png|jpe?g|gif)$/, use: { loader: 'url-loader', options: { outputPath: 'img', name: '[name].[ext]' } } }, { test: /\.vue$/, use: [ 'vue-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin(), new vueLoaderPlugin() ] }Copy the code

3. Problems encountered:

  • 3.1 package.jsonIn the configuration
Json "scripts": {"serve": "webpack serve --config webpack.config.js"}Copy the code

The purpose is not to use YARN webpck –config webpack.config.js to compile each time. Because different configuration files are configured for different environments, the configuration file needs to be specified for each packaging operation.

  • 3.2 Invalid Configuration Object. Webpack has been initialised using a configura

    The reason:

    • package.jsonConfigured in the filewebpackThe version is inconsistent with the version used
    • Check if it exists in the codemoduleWritten on themodules

    Solutions:

    • Reinstall the Webpack version:yarn add webpack --dev || npm install webpack --save-dev

  • ERROR in Entry module not found: ERROR: Can’t resolve ‘babel-loader’

    The reason:

    • This type of error does not find the module, just install:yarn add babel-loader --dev || npm install babel-loader --save-dev

  • You may need an additional loader to handle the result of these loaders.

    Reason: Need a loaders to load some results after run

    Solution: Install the vue-loader vue-template-compiler

    Error when executing throw again: 在webpack.common.jsTo import the correspondingplugin:

const vueLoaderPlugin = require('vue-loader/lib/plugin-webpack5') .... Plugins: [new HtmlWebpackPlugin(), new vueLoaderPlugin()]Copy the code

4. webpack.prod.jsIn:

Demand analysis:

  • You need to usecommonSome of the
  • The code needs to be compressed separately and packagedpublicFile in:new CopyWebpackPlugin(['public'])

So you get the following code:

const common = require('./webpack.common')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = Object.assign({}, common, {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin(['public'])
  ]
})
Copy the code

In this case, the concatenated objects after assign overwrite the previous objects, so it is not appropriate to merge the configurations in common using the webpack-merge module. Installation and introduction:

Yarn add webpack-merge --dev // or NPM install webpack-merge --save-dev // import const commonConfig = require('./webpack.common') const {merge} = require('webpack-merge') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = merge(commonConfig, { mode: 'production', devtool: 'nosources-source-map', module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // enable CSS Modules modules: false, } } ] } ] }, optimization: { usedExports: True,// mark uncited code with minimize: true,// remove unused code splitChunks: {chunks: 'all'}}, plugins: [new CleanWebpackPlugin(),]})Copy the code
  • 4.1 Compilation appears:Multiple chunks emit assets to the same filename bundle.jsAn error
    • Cause: Only one output file name is specified when packaging multiple file entries. Output should be packaged according to the file name for each file that needs to be packaged
    • Solution: Inwebpack.common.jsIn:
output: {
    filename: './js/[name].js',
    path: resolve(__dirname, 'build')
}
Copy the code

Configuration of 5.webpack.dev.js

Demand analysis:

  • You need to usecommonSome of the
  • You need to useeslintEliminate formatting and syntax errors during development
  • invueIn the integrationeslint, need to passloaderLoad and in.eslintrc.jsIn thepluginA configuration

So you get the following code:

const  commonConfig =  require('./webpack.common')
const {merge} = require('webpack-merge')

const path = require('path')


module.exports = merge(commonConfig,{
  mode:'development',
  devtool:'eval-cheap-module-source-map',
  module:{
    rules:[
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'eslint-loader',
        enforce:'pre'
      },
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000,
    // open: true,
    hot: true
  }
})

Copy the code
  • 5.1 need to installeslint eslint-loader:
NPM install eslint eslint-loader --save-dev // or yarn add eslint eslint-loader --devCopy the code
  • 5.2 the initialization.eslintrc.jsFile:
NPX eslint --init // or yarn eslint --initCopy the code
  • 5.3 get.eslintrc.jsFile and configure:
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  plugins: [
    'vue'
  ],
  rules: {
    
  }
}
Copy the code

6 inpackage.jsonTo configure related commands

"scripts": {
    "build": "webpack --config webpack.prod.js",
    "serve": "webpack serve --config webpack.dev.js",
    "lint": "npm run serve"
  },
Copy the code

After a few column operations, package.json looks like this:

{" name ":" vue - app - base ", "version" : "0.1.0 from", "private" : true, "scripts" : {" build ": "webpack --config webpack.prod.js", "serve": "webpack serve --config webpack.dev.js", "lint": "NPM run serve"}, "dependencies" : {" @ Babel/core ":" ^ 7.12.16 ", "@ Babel/preset - env" : "^ 7.12.16", "Babel - loader" : "^ 8.2.2 core -", "js" : "^ 3.6.5", "vue" : "^ 2.6.12"}, "devDependencies" : {" @ vue/cli - plugin - Babel ": "^ 4.5.11 clean - webpack -", "plugins" : "^ 3.0.0", "copy - webpack - plugin" : "^ 7.0.0", "CSS" : "^ 3.0.0", "CSS - loader" : "^ 5.0.2 eslint", ""," ^ 7.20.0 ", "eslint - config - standard" : "^ 16.0.2", "eslint - loader" : "^ 4.0.2", "eslint - plugin - import" : "^ 2.22.1 eslint - plugin -", "node" : "^ 11.1.0", "eslint - plugin - promise" : "^ 4.3.1", "eslint - plugin - vue" : "^ 7.6.0 file -", "loader" : "^ 6.2.0", "HTML - webpack - plugin" : "^ 5.1.0", "less" : "^ 4.4.1", "less - loader" : "^ 8.0.0 style -", "loader" : "^ 2.0.0", "url - loader" : "^ 4.4.1", "vue - loader" : "^ 15.9.6", "vue - style - loader" : "^ 4.1.2 vue - the template -", "compiler" : "^ 2.6.12", "webpack" : "^ 5.23.0", "webpack - cli" : "^ 4.5.0", "webpack - dev - server" : "^ 3.9.0 webpack -", "merge" : "^ 5.7.3"}, "eslintConfig" : {" root ": true," env ": {" node" : true}, "extends" : [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }Copy the code