Project setup documentation (with detailed comments for each step of code configuration)

Online display :http://118.24.144.217/ Project Address :github.com/Jasonccj/vu… Blog address :juejin.cn/post/684490… Mooc address :www.imooc.com/learn/935

1. Vue + Webpack project engineering configuration

Because this code is using Webpack 3.10.0. and Webpack 4.x has a lot of differences, partners do not stagnate because of version problems The specific version can be viewed in package.json, and there are super detailed annotations for the details. Welcome friends to put forward valuable opinions and communicate with us, so that we can improve our front-end skills together

1.1 Basic Project Configuration

NPM init Initialize an NPM project NPM I [email protected] [email protected] [email protected] install webpack and vUE, use vUE to install vue-loader NPM I [email protected] [email protected] Install THE CSS-loader as prompted by the TERMINAL WARN, because vue-loader depends on THE CSS-loader // Specify a specific version for each version, because the update is too fast to avoid the problem of version differences, so specify the version

Write the basic VUE structure in app.vue

First set the entry entry declaration in webpack.config.js to declare our entry file index.js

In the example app.vue is actually a component, which can’t be mounted directly in our HTML. It needs to be mounted in index.js

Webpack.config. js also sets the export file bundle.js and its storage path

After configuration, configure the build script in webpack.config.js, –config specifies our config file because it says that when you call it, the project’s webpack will be called. Otherwise, the global webpack will be called. There may be some differences between the global webpack and the project’s version

1.2 Loading various static resources

For other types of files, Webpack can configure the rules rule in the configuration file. NPM I [email protected] [email protected] [email protected] NPM I [email protected] [email protected] [email protected]

The CSS preprocessor for stylus NPM I [email protected] [email protected] and other preprocessors such as SASS and LESS can be used in a similar way

1.3 Webpack-dev-server Configuration

NPM I [email protected] webpack-dev-server in the development environment will give us a different effect than Webpack, using the same configuration file

    "build": "webpack --config webpack.config.js"."dev": "webpack-dev-server --config webpack.config.js"
Copy the code

NODE_ENV=production NODE_ENV=production NODE_ENV=production NODE_ENV=production NODE_ENV=production, to resolve this difference in cross-platform Settings, we can install [email protected] NPM I [email protected]

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"."dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
Copy the code

After webpack.config.js has configured our test environment, we also need to introduce an HTMl-webpack-plugin to incorporate our packed JS into our HTML NPM I [email protected] Once you’re done with webpack.config.js, you can use NPM Run Dev to witness the magic moment

The project of actual combat

NPM I post I [email protected] [email protected] [email protected] [email protected] Create and configure postCSS and Babel configuration files

Project business

See the source code

Configure CSS separate packaging and other differences between test and production environments

Install extract-text-webpack-plugin NPM I [email protected]

Package library code and hash optimization

Configuration part screenshots (for demonstration only, each step of the code configuration with detailed comments)

subtotal

  • Xiaoji.md is used to record some notes

The last

  • Like to remember to point a star. Encourage once, thank you!
  • WeChat cuixianseni
  • Qq group no. 424072183