Webpack5 basic configuration (vue project)

This time, I will talk about the VUE project based on Webpack 5. I hope it will be of some help to those who can brush the article. I also hope that we can study together and make efforts to break through ourselves.

It is recommended to read the Introduction to WebPack first, so that you have a better grasp of this article

— — — — — — — — — — 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 — — — — — — — — — — –

👉👉👉👉👉 Webpack Basic Portal

I. Project initialization

npm init -y 
npm i webpack webpack-cli -D
Copy the code

Run webpack to package the project and see if the dist package is output. Then index. HTML is imported into the dist folder main.js and open the page to see if it is output normally.

Ii. Webpack Subcontracting (Common, Prod, Dev)

1. Create a file in the config folder

2. Merge paths

3. Common configuration

4. Develop configurations

5. Production configuration

6. Configure commands

7. Verify the configuration

Run the NPM run build command, if you find the information printed just now, and the mode in the production, it indicates that the configuration merge is successful!

Third, introduce dependency

1.loader

1. Css-loader, style-loader, and postCSs-loader

npm i css-loader style-loader postcss-loader postcss-preset-env@6 -D
Copy the code

2. Create the browser version file browserslistrc

3. Create a postCSS-PRESET -env file to centralize browser compatibility

4. Vue dependencies

npm i vue -S
npm i vue-loader -D
npm i vue-template-loader -D
Copy the code

2.plugins

1.html-webpack-plugin

NPM I html-webpack-plugin -d -- Automatically generates HTML files after packaging, and introduces the generated JS files into the packageCopy the code

2.clean-webpack-plugin

NPM I clean-webpack-plugin -d Empty the output folder before packingCopy the code

3.dev-server

NPM I webpack-dev-server -d -- Enable the service locallyCopy the code

Run NPM Run serve to start a local service from the web page

4. Introduce common libraries

1.vuex

npm i vuex --save 
Copy the code

Create index.js in the create Store folder in SRC and import it in main.js

2.vue-router

npm i vue-router --save
Copy the code

Create the router folder in SRC, create index.js, and import it in main.js, create views, create home and About pages, and start importing it in app.vue

3.axios

1.json-server

To simulate real data, start with a local service, and this plug-in does just that

NPM I json-server -d -- A plug-in for local servicesCopy the code

The mock file is created in the project root directory and db.js is created

2. Encapsulate AXIos twice

Create service folder NPM I axios --save under SRCCopy the code

1. Create the request.js file

2. Create the index.js file

3. Create an API file in the SRC directory to store the API in a centralized manner

4. Add the proxy to webpack.dev.js

5. Invoke this interface in about.vue

5. Configure the shortcut path

Sixth, the compression

1. sourcemap

Sourcemap produces files that map the source location of the compressed code before the transformation, eliminating the difficulty of debugging the compressed code. For details, see the document. Set parameter values as required. Different parameter values significantly affect the build and rebuild speed.

// webpack.dev.js
    devtool: 'eval-cheap-module-source-map', 
// webpack.prod.js
    devtool: 'cheap-module-source-map',
    
Copy the code

2. Js compressed

If you are using WebPack 5 or above, you do not need to install this plugin. Webpack 5 comes with the latestterser-webpack-pluginAnd automatically used when mode is ‘production’.

npm i terser-webpack-plugin -D
Copy the code

3. The CSS compression

npm i css-minimizer-webpack-plugin -D
Copy the code

Webpack5 basic configuration (vue project)