Since we implement different packaging tasks in different development and production environments, we extract common configuration parts such as webpack.common.js and separate different files according to the running environment. During the development phase, we put its configuration in webpack.dev.js, and the configuration that needs to be published to the build is in webpack.prod.js. Next, I divided it into three stages to record my implementation process

Environment to prepare

Install Webpack and WebPack-CLI

Public File Configuration

Import file and package output directory configuration

entry: './src/main.js'Output: {path: path.join(__dirname,'./dist'), // Specify the output file directory filename:'bundle.js'// Specify the output file name},Copy the code

2. Configure loader

  1. Install vue source code, parse vue file vue-html-loader, parse Vue tempalte HTML code vue-html-loader, parse style style vue-style-loader configuration as follows:
// Configure the loader for vue {test: /\. Vue $/, // pit: Error: [VueLoaderPlugin Error] No matching rulefor .vue files found.
        // Make sure there is at least one root-level rule that matches .vue or .vue.html files.
        use: [
          'vue-loader'], exclude: / node_modules | bower_components) /}, / / configure vue - style - loader {test: /\.css$/,
        use: [
          // 'style-loader'.'vue-style-loader'// Add vue style to js module'css-loader'}},Copy the code
  1. Install the loader for loading resource files, compile the less-loader for less, and load the file-loader for images
// load less file loader {test: /\.less$/,
        use: [
          {
            loader: 'style-loader'// create style from js module to add to HTML}, {loader:'css-loader'// add CSS to js module}, {loader:'less-loader'}}}, {test: /\.(png|jpe? g|gif)$/, use: { loader:'file-loader',
          options: {
            outputPath: 'img',
            name: '[name].[ext]'}}}Copy the code
  1. Configure Babel for ES new feature transformation
// configure Babel {test: /\.js/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']}}},Copy the code
  1. Install and configure ESLint to give hints about syntax, format, and so on for code in VUE or JS
// configure eslint-babel {test: /\.(js|vue)/,
        exclude: /(node_modules|bower_components)/,
        use: 'eslint-loader',
        enforce: 'pre'// Make sure to execute} before compiling,Copy the code

Configure plug-ins

  1. VueLoaderPlugin cannot be used directly after version 15+, so you need to instantiate the VueLoaderPlugin in plugins
// const VueLoaderPlugin = require('vue-loader-plugin')
// webpack 4 
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}
Copy the code
  1. Install and configure htML-webpack-plugin to implement packed JS files

Configuration in the development environment

In the development environment, we need to add a local server to run our packaged projects. Webpack provides us with a Webpack-dev-server that supports file modification, page auto-refresh, and hot plug and plug optimization experience

  1. Install webpack-dev-server using NPM or YARN
  2. Install WebPack-merge to merge common configuration files
// pit: merge is notfunction// const merge = require('webpack-merge')
const { merge } = require('webpack-merge')
Copy the code
  1. Open hot update, files can be modified, the page can follow the update without refreshing
devServer: {
    hot: true// Enable hot update:true// Enable auto-open browser contentBase:'./public'
    // publicPath: '/index.html'
  },
Copy the code

Run webpack-dev-server –inline –progress –config webpack.dev.js or configure it to pakage.json, and then run NPM run serve

"serve": "webpack-dev-server --inline --progress --config webpack.dev.js"
Copy the code

Configuration in the production environment

  • The configuration in the production environment adopts the production packaging mode, which can compress the final generated packaging file.

  • To avoid exposing the source code to the outside world and to give developers some direction when things go wrong, sourceMap uses nosource-source-map

  • I need to clear out the results that I packed,

  • Resources in the public directory need to be copied into the package file

const common = require('./webpack.common'// pit: merge is notfunctionConst {merge} = require(const {merge} = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = merge(common, {
  mode: 'production',
  devtool: 'nosources-source-map',
  devServer: {
    hot: true,
    contentBase: './public'
    // publicPath: '/index.html'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        { from: 'public', to: 'public'}]})})Copy the code