The recent research on WebPack configuration has been so frustrating that packaging tools may one day be replaced. Constructing webpack scaffolding for a complex application by hand is not an easy task. Check out vue-CLI webPack configuration files with 8+ plugins, 14+ plugins, and 800 + lines of code. If you need to understand so many “rules” before you even start writing code, you might as well spend some time studying the core of JS so you can make your own tools someday. In order to repeat the pits, or to document the process of adapting to these rules, it is often not covered by tool documentation. Don’t be a tool builder, but use tools.

I. Environment Preparation (the author is Windows Environment)

1.1. Installation node

To install Node, go to the official website. Node comes with NPM. Open CMD and enter the following command to check whether the installation is successful:

node -v
npm -v
Copy the code

error1 ：nodeCommand not responding

Solution: Delete the NPMRC file from the NPM directory.

1.2. Initialize the project

Run NPM init to initialize a project as prompted and generate package.json file

Note: The folder name of the project root directory cannot use Spaces, otherwise the project will report an error.

error1 ：npmCommand not responding

Solution: Delete the NPMRC file from the NPM directory.

error2: Global installation error: no permissions, or the NPM command is not responding

Solution: Change nodePATH to a directory with permissions. Otherwise, you may have permissions when using the command line global installation package.

  • Check the environment variables PATH and NODE_PATH
  • View the default global installation path:npm config get prefix
  • It is added in the node installation pathnode_globalandnode_cache2 folders
  • Change the default global installation path:

npm config set prefix ‘C:\Users\Administrator\node\node_global’ npm config set cache ‘C:\Users\Administrator\node\node_cache’

  • Check the default global installation path again
  • Modifying environment Variables
    • User variable –NODE PATH 和 PATHAdd: C:\Users\Administrator\node\node_global
    • System variable –PATHAdd: C:\Users\Administrator\node\node_global
  • Restart CMD for path to take effect

error3: unexpected Token {} in JSON at position 403

Solution: Delete the pakage.json.lock file.

Ii. Management of packages

2.1. Installation of yarn

You are advised to install YARN to facilitate version control and install the official YARN document. Installation instructions:

Yarn init // Initialize the project to generate the yarn.lock file yarn add [pakeage] --dev // --dev Plug-in used only in the development environment YARN (install) // Install all dependencies in the lock fileCopy the code

error1Was installed:yarnRun,yarn installError not available!

Solution: Add the bin folder in the YARN installation folder to the environment variable.

Installed 2.2.cnpm, NPM Domestic mirror (optional)

npm install -g cnpm –registry=https://registry.npm.taobao.org

3. Scaffolding construction

3.1 VUE-CLI Scaffolding erected quickly

  • Global installation:npm install -g vue-cli;
  • Check whether the installation is successful:vue -V;
  • Initialization project:vue init webpack my-project;
  • Don’t usenight watch, inside the demo dependencygoogleResources that cannot be used domestically, The test below navigates to google.com and searches for “Rembrandt van Rijn “, Then verifies if the term first result is the Wikipedia page of Rembrandt.

3.2 Simple Webpack project construction without VUE-CLI for reference

Build a Webpack project in 5 seconds

  • NPM install –save-dev webpack

  • Configure the webpack.config.js file

 const path = require('path');
 module.exports = {
     entry: './src/app.js'Output: {path: path.resolve(__dirname,'bin'),
         filename: 'app.bundle.js'}};Copy the code

  • NPM install webpack-dev-server;

    Webpack-dev-server –content-base build/;

Four, install a variety of required packages

4.1. Common packet portal

4.2. Installation instructions

–save-dev NPM install –save-dev package name

–save NPM install –save package name

4.3. Compile ES6 or above using Babel

  • cnpm install –save-dev babel-cli babel-preset-env
  • cnpm install –save-dev babel-loader
  • npm install –save-dev babel-polyfill

Babel-polyfill only compiles ES6 syntax such as arrow functions. You can use babel-Polyfill to compile global variables such as Promise and native new features such as String.padstar. Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

4.4. Creat A. babelrc file (need not be created if already generated)

{
  "presets": [["env"]},Copy the code

5. Some useful configurations

5.1 Interface Forwardingproxytable

In a development environment, you can also solve cross-domain problems by setting up address maps to simplify complex urls

    // config/index.js
        proxyTable: {
            '/api'// Forward all the API contained in the request path to the target configured below:'http://127.0.0.1:3000'// The domain name or IP address of your interface // Secure:false// If the interface is HTTPS, you need to configure the parameter changeOrigin:true// If the interface is cross-domain, you need to configure this parameter pathRewrite: {'^/api': ' '}}},Copy the code

5.2 URL Configuration in the Production Environment (Development Environment, Online)

let devUrl = 'api/asset/'; // Match the API path configured in the proxytable abovelet proUrl = 'https://node.xxxx.com/asset/';
(curEnv == "production")? (baseUrl = proUrl) :( baseUrl = devUrl);Copy the code

5.3. Modules are loaded on demand

For projects built using vue-CLI, by default, NPM run build will pack all js code into a single package, dist/static/js/app.[contenthash].js. This file is very large, possibly several megabytes. Page performance is severely affected.

When modules are introduced into the routing file, modules are packaged. The components we want to combine together are packaged into a chunk, using Webpack’s require.ensure, and a chunk name is added at the end. Modules with the same chunk name will be packaged together.

router/index.js
const lotteryIndex = r => require.ensure([], () => r(require('@/pages/lottery/lottery-index.vue')), 'chunk1')
const drawList = r => require.ensure([], () => r(require('@/pages/lottery/draw-list.vue')), 'chunk2')
const drawDetail = r => require.ensure([], () => r(require('@/pages/lottery/draw-detail.vue')), 'chunk3')
Copy the code