Vue mobile terminal development environment based on Webpack4 - build chapter

Writing in the front

When using Vue to develop single pages, we used the official CLI tool most of the time, now Vue CLI has been iterated to 4.x, can be said to be very mature and stable, can meet most requirements, and easy to use. In the spirit of fumbling, or to build their own development environment, familiar with the various processes.

This article does not cover Webpack and Babel knowledge, it is recommended to understand the basic knowledge of Webpack to read this article. You can find many tutorials on this on the Internet. Node.js and NPM installation is no longer described here, I believe that front-end development is necessary for computers.

If you encounter an unknown error during the build process, check the error information and record the troubleshooting. Sometimes the use mode of the relevant plug-in will change after the update. You may also get an error when you follow my configuration, so check the official document (generally check the relevant repository on Github) to see if the writing method has changed. The clean-Webpack-plugin I configured this time, for example, didn’t need to be deconstructed in previous versions, but now it has to, or it will report an error and say it’s not a constructor

Big guy detour light spray…

Update: If both development and production use plug-ins to separate the CSS into separate files, you may find that hot updates do not apply to the CSS during development, so the solution is to separate the CSS and only configure it in production. A hole for everyone, sorry!

Optimization has come out: Vue mobile terminal development environment based on Webpack4 – optimization

The starting address

My node.js and NPM versions are as follows:

Node -v v12.13.0 NPM -v v6.12.0Copy the code

start

Initialize a project

First you need to create a new folder, I call customized-vue-proj-mobile, and right-click the customized folder in your folder to open git bash and type the following command to initialize your project (git installation is required, and CMD is also available) :

npm init
Copy the code

After executing this command, a package.json file is generated in the directory. My file contains the following contents:

{
  "name": "customized-vue-proj-mobile"."version": "1.0.0"."description": "customized vue development environment"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "git+https://github.com/cookiepool/customized-vue-proj-mobile.git"
  },
  "keywords": [
    "vue"."mobile"]."author": "LEE"."license": "MIT"."bugs": {
    "url": "https://github.com/cookiepool/customized-vue-proj-mobile/issues"
  },
  "homepage": "https://github.com/cookiepool/customized-vue-proj-mobile#readme"
}
Copy the code

Here about NPM package management also have a lot of knowledge, not here to expand, I suggest you can understand

After a project is initialized, the installation of various tools is used to complete the setup of the environment.

2. Install WebPack

With webpack, you must install webpack before you can proceed with the subsequent installation, so first install command:

npm install webpack --save-dev
Copy the code

--save-devIndicates that the package installation information is placed intopackage.json 的 devDependenciesInside, this is not going to be used in production,-DEquivalent to--save-dev.

--saveIndicates that the package installation information is placed intopackage.json 的 dependenciesInside, this will be packaged for production.-SEquivalent to--save.

Next, you need to install the CLI. Starting with Webpack4, you must install webpack CLI to run webpack-related commands

npm install webpack-cli -D
Copy the code

Next, type NPX webpack –help to test whether Webpack is available or not. If this command is followed by a large list of configuration help messages, webPack is available.

Bash: webpack: Command not found: Bash: webpack: Command not found: Bash: webpack: Command not found bash: webpack: Command not found

Now create a new SRC folder in your project directory, create a main.js file, and write some js code in it. Then create a build folder and create a new webpack.config.js configuration file. So our directory structure looks like this:

Now that the file is set up and there is no content in it, I’m sure it won’t run, so I’m going to run webpack.config.js. I’m not going to describe the process here.

// build/webpack.config.js // node.js const path = require('path'); Module. exports = {// specify mode, none production development //'development'// Webpack pack entry: {main: path.resolve(__dirname,'.. /src/main.js'}, // output: {// Output path: path.resolve(__dirname,'.. /dist'), // Generated js file after packaging, withhashFilename:'js/[name].[hash:4].js'// Generate the chunk filename chunkFilename:'js/[name].[hash:4].js'// The reference path of the resource (this depends on the configuration of your package) publicPath:'/'}}Copy the code

Json. Add dev to scripts:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack ./src/main.js --config ./build/webpack.config.js"
},
Copy the code

After that, let’s try to see if this command works by typing in the console:

npm run dev
Copy the code

After a while, the following information will appear, which means that we have packaged the output successfully:

The structure of the project now looks like this:

The environment setup at this point can only say that WebPack is configured properly, and there are many additional things to configure, such as the following

Babel, which converts ES6+ to ES5 for low browser availability, and polyfills some new apis
CSS preprocessor, there are many options for CSS preprocessor, here I choose SCSS to do the configuration, of course, you do not use CSS preprocessor is also possible.
File processing loader, this is mainly project-related picture, font, audio and video processing.
HTML files are automatically created, and your packed JS files need to be correctly imported into HTML to work properly.
Postcss, a tool that deals with CSS, installs plug-ins that automatically add cSS3 prefixes, pX-to-REM or Px-to-VW for mobile development, and so on.
The hot update function automatically responds to our changes and updates during development, without manual refreshes.
Recognize the.vue file, this is for WebPack to recognize the.vue file and convert it into something that the browser can use.
Integrate VUE-Router and VUex, do single-page routing is indispensable, state management can be introduced according to the need, is not necessary to configure things.

3. Configure related tools

3.1 ES6+ to ES5

Start with a wave of install commands to install the dependencies:

npm install babel-loader @babel-core @babel/preset-env -D
Copy the code

Babel-loader this is a loader for webpack to handle Babel, which calls @babel/core’s core API to complete compilation.
@babel-core The core of Babel, the core API is contained here.
@babel/preset- A preset environment for env Babel.

Refer to this article to get a better understanding of Babel. Of course, there are many articles written by big names in the community. Read more articles to get a better understanding.

Modify the webpack. Config. Js

Now we need to configure WebPack to support Babel, using the babel-loader we just installed. Add the following code to the configuration file:

module: {
  rules: [
    {
      test: /\.jsx? $/, exclude: /node_modules/, use: [ { loader:'babel-loader'}]}]}Copy the code

Create babel.config.js in the root directory of the project

Add the following to the file:

Exports = {// config.js module.exports = {// config.js module.exports = {// Config.js module"@babel/preset-env"]}Copy the code

After the configuration, go to main.js and write some ES6 + syntax js code, then execute NPM run dev. You’ll see that the js files generated in dist are converted to ES5 syntax, but promise is not.

Polyfill is configured and imported as needed

Enter the following command to install the required dependencies:

npm install core-js@2 -S
Copy the code

After installation, go to babel.config.js and modify the code as follows:

Module.exports = {// set presets: [// used rules ["@babel/preset-env", {// there arefalse, Entry, Usage Three optional parameters. Usage can be used to introduce polyfill as required"useBuiltIns": "usage"// Specify the corejs version"corejs": 2}]]}Copy the code

This way your JS can run in older browsers, such as Promise.

3.2. Configure the CSS preprocessor

Again, install dependencies first

npm install sass-loader dart-sass css-loader style-loader -D
Copy the code

Style-loader This loader is used to parse the CSS to the STYLE tags of HTML.
Css-loader This loader is used to parse CSS. When invoking style-loader and CSs-loader, css-loader must be executed before style-loader. Otherwise, an error message will be displayed.

use: [{loader: 'style-loader'}, {loader: 'css-loader'}]
Copy the code

Because loader loads from right to left. Cs-loader is used to compile the CSS code, and then the style-loader is used to insert the CSS code into the page. So CSS-loader is on the right and style-loader is on the left.

Sass-loader This loader converts SCSS or SASS to CSS.
Dart-sass is a compiler that converts SCSS syntax to sass-loader. There is also a node-sass utility that can be used. If you use Node-sass you don’t need to specify it in the webPack configuration file, you just need to install Node-sass with NPM. I’m using Dart-sass here so I need to specify it in implementation.

After downloading and installing the dependencies, add the following code to the module->rules configuration file in webpack.config.js:

{
  test: /\.(scss|sass)$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
      options: {
        implementation: require('dart-sass'}}]}Copy the code

3.3. Creating Html files and related processing

Create a directory public in the project directory and create an index. HTML as the only entry to the single page. The code is as follows:

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>customized-vue-proj-mobile</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
Copy the code

The directory structure becomes as shown in the figure

After creating the HTML file, we need a plugin to process the HTML file. Our project can only run if the JS file is imported into the HTML file properly. Type the following command to install the HTml-webpack-plugin:

npm install html-webpack-plugin -D
Copy the code

After installation, add the following code to the plugins in the WebPack configuration file:

Plugins: [new htmlWebpackPlugin({// specify template: path.resolve(__dirname,'.. /public/index.html'Filename: path.resolve(__dirname,'.. /dist/index.html')})]Copy the code

3.4. Configure the processing of fonts, pictures and other files

Webapck has a special loader to handle these files. First install the dependency:

npm install url-loader file-loader -D
Copy the code

Url-loader and file-loader actually have similar functions. The advantage of url-loader is that when the file size is smaller than the specified size, it can convert the media file to Base64 encoding, which can reduce the image request of the project and improve the access speed.

We then add the following code to the WebPack configuration file:

{
  test: /\.(jpe? g|png|gif)$/i, use: [ { loader:'url-loader', options: {// if the file size is larger than 5kb, go to the configuration of file-loaderlimit: 5120, // This parameter should be set tofalse[Object Module] esModule:false// If the file size is larger than 5KB, go to the file-loader fallback configuration:'file-loader'// Generate path and filename name:'images/[name].[hash:4].[ext]'}}]}, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/, use: [ { loader:'url-loader',
      options: {
        limit: 5120,
        esModule: false,
        fallback: 'file-loader',
        name: 'media/[name].[hash:4].[ext]'}}]}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/i, use: [ { loader:'url-loader',
      options: {
        limit: 5120,
        esModule: false,
        fallback: 'file-loader',
        name: 'fonts/[name].[hash:4].[ext]'}}},Copy the code

That’s how we’ve configured our media file handling.

3.5. Let WebPack recognize vUE files

Install dependencies:

npm install vue-loader vue-template-compiler -D
Copy the code

Vue-loader must be used in conjunction with vue-template-compiler, otherwise the conversion cannot be completed.

First configure the contents of the Module:

{
  test: /\.vue$/,
  use: [
    {
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          preserveWhitespace: false}}}]}Copy the code

The compilerOptions parameter preserveWhitespace is false, which means that the compiled renderer will keep Spaces between all HTML tags. If set to false, Spaces between labels are ignored. This improves performance slightly but may affect the layout of inline elements. For details, see here: link

After configuring the Module, we will also introduce the plug-in, which is a must

Const VueLoaderPlugin = require('vue-loader/lib/plugin'); // Add new VueLoaderPlugin() to pluginsCopy the code

Specific you can refer to here: link

Then we also need to configure aliases to reduce the hassle of long path references:

resolve: {
  aliasImport Vue from: {// import Vue from'vue'Is introduced, and the vue/dist/vue. Runtime. Esm. Js this version, otherwise the default is the introduction of vue. Js. This is explained in the github vue official repository dist directory.'vue$': 'vue/dist/vue.runtime.esm.js'Import API from; //'@/api/api.js', save the trouble of finding a path to locate to SRCThe '@': path.resolve(__dirname, '.. /src'}, // add a resolve.extensions attribute so that we can import dependencies or files without the suffix // Import API from when importing files'@/api/api'. extensions: [The '*'.'.js'.'.vue']},Copy the code

3.6. Configure postCSS

There are three plugins for autoprefixer, PostCSS-pxtorem, and postCSs-px-to-viewPort. You only need to configure one of the last two plugins, depending on whether you are using REM or VW, you can choose by yourself.

npm install postcss-loader autoprefixer postcss-pxtorem postcss-px-to-viewport -D
Copy the code

Postcss-loader Performs postCSS-related operations.
Autoprefixer adds different CSS3 prefixes to the browser.
Postcss-pxtorem PX automatically converts to REM.
Postcss – px – to – viewport px automatically converted to vw | vh.

Once the dependencies are installed, create a file postcss.config.js in your project’s root directory and type the following into the file:

Module.exports = {plugins: {// This tool can automatically add CSS3 prefix"autoprefixer"This tool converts PX to REM /* if you use REM for mobile multi-device adaptation"postcss-pxtorem": {rootValue: 37.5, // Specify the conversion ratio, I'm now setting this to mean 1rem=37.5px; propList: [The '*'], // Attribute list, which CSS attributes you want to convert px to REM, this * represents all minpixelValues: 1, // The minimum value that needs to be converted, usually 1px pixels will not be converted, before the above conversion unitPrecision: SelectorBalckList: [selectorBalckList: [selectorBalckList: ['van'], // match a selector that is not converted to REMtrue// Replace the rule that contains REM instead of adding a fallback mediaQuery:false*/ / If you are using VW for mobile multi-device adaptation, this tool can convert PX to VW"postcss-px-to-viewport": {
        	unitToConvert: 'px'// Set the unit to vw viewportWidth: 750, // This can be set according to your design, 750 is set to 750, 375 is set to 375 unitPrecision: 6, // The reserved number of decimal places converted to vw units propList: [The '*'], // The property list, which CSS properties you want to convert px to vw, the * represents all viewPortUnits:'vw'Vw,vh, vw,vh We usually have vw fontViewportUnit:'vw', // The unit used for the font selectorBlackList: [], // match the selector minPixelValue: 1 that is not converted to VW, // The minimum value that needs to be converted.false, // Allow to convert px replace:true// Exclude: [], // Ignore some files, such as "node_modules", which can be regular expression landscape:false, / /... landscapeUnit:'vw', / /... landscapeWidth: 568 // ...... }}}Copy the code

Then, the WebPack configuration adds:

{
  test: /\.(scss|sass)$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
      options: {
        implementation: require('dart-sass')
      }
    },
    {
      loader: 'postcss-loader'}}]Copy the code

3.7. Configure hot update

Install dependencies:

npm install webpack-dev-server -D
Copy the code

After the installation is complete, perform the following configuration:

Const webpack = require('webpack'); DevServer: {// This can only be accessed from localhost:9000 by default. Now it can be accessed from local LAN IP, such as 192.168.12.21:9000.'0.0.0.0',
  hot: true,
  port: 9200,
  contentBase: './dist'} / / configure plugins. New webpack NamedModulesPlugin (), . / / auxiliary HotModuleReplacementPlugin plug-in new webpack HotModuleReplacementPlugin (), / / to enable hot update requiredCopy the code

4. Define environment variables

NODE_ENV, which is used to determine which environment is executing which code. We know that the webPack environment and the development environment configuration are generally different. We won’t expand it here, but we’ll talk about it later. For example, we write code in the main.js entry like this:

if(process.env.NODE_ENV === 'development'){// Development environmentdo something
}else if(process.env.NODE_ENV === 'production') {// Production environmentdo something
}
Copy the code

So how do you define this environment? The first is via webPack’s DefinePlugin,

Using DefinePlugin we add the following code to our plugins:

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('development')}}),Copy the code

So the value of process.env.node_env that we access after the final package is development.

Another way to use webpack4’s own integrated environment judgment, we just need to declare mode in the configuration file, this is recommended

Use the webpack4 mode parameter

Module. exports = {// none production development = {// none production development = {// none production development = {// none production development = {// none production development = {// none production development = {// none production development = {// none production development = {"development",
  entry: {}
  .....
}
Copy the code

With the mode setting above, we can still get the value of process.env.node_env. Process. Env.NODE_ENV

Link-1 link-2 link-3

5. Integrate Vue family bucket

Install dependencies

npm install vue vuex vue-router -S
Copy the code

After installing the dependencies, create a new app.vue file in the SRC directory. Write the following code:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss">

</style>
Copy the code

Create router and store directories under SRC, and create router.js and store.js respectively. By the way, also build other folders, such as Components, Assets, views. Now my directory structure looks like this:

Change to the following code in main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
Copy the code

After these files have been built, the code is written just like the official scaffolding. I will not show how to write the code of other files. Then I can refer to my source code.

After vuE-Router and VUex are introduced here, the test can be started after configuration according to the official documents. I only tested the normal functions of VUE and VUe-Router, while VUex only established files for the time being, but did not carry out the actual introduction test. I will submit the source code to Github for your reference

NPM run dev will be packaged, so we need to change the dev of package.json scripts to the following code:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack-dev-server --config ./build/webpack.config.js"
},
Copy the code

At this point, if you have done the previous work, you should in theory see the effect after executing NPM run dev here, which looks something like this:

6. Distinguish between development and production environments

As we all know, the development environment and production environment are not quite the same, usually use the official CLI command development command NPM run dev, and package release NPM run build. There is definitely a difference in configuration.

Now create two new webpack.dev.js and webpack.prod.js files in the build directory to distinguish the development environment from the production environment. It also writes the common configuration for both development and production environments in webpack.config.js.

The development environment

1. Set the mode property of Webpack to development. Enabling this will not compress the code. 2. Need webpack-dev-server and hot update. 3. CSS does not need to be extracted into a separate file and compressed (of course you can also extract it). 4

The production environment

1. Set the mode property of Webpack to Production, which will compress the code. No need for Webpack-dev-server and hot updates. 3. CSS should be extracted into a separate file and compressed. 4

Ok, now that we understand the difference, we need to install other dependencies separately, starting with the wave install command, a shuttle:

npm i clean-webpack-plugin copy-webpack-plugin @intervolga/optimize-cssnano-plugin mini-css-extract-plugin webpack-merge  webpack-bundle-analyzer -DCopy the code

The clean-webpack-plugin is mainly used to clean up the contents of the last package. Since new hash values are generated after each package file, a large number of files will accumulate if you do not clean up the dist directory in a timely manner, which may cause unnecessary trouble.
Copy-webpack-plugin Sometimes we have static resources, i.e. files that do not participate in packaging, and we need this plugin to copy the resources and make them accessible.
@intervolga/optimize-cssnano-plugin Separates CSS files for compression.
The mini-CSS-extract-plugin is used to isolate CSS.
Webpack-merge A plug-in that merges webpack configurations.
After webpack-bundle-Analyzer is packed, you can see the size of each JS file and its proportion in the project.

Next modify the relevant files

6.1, webpack. Config. Js

~~Note: here I put the miniCssExtractPlugin in the general configuration file, which is used for both development and production. The format is a bit messy~~

Update: Since extracting files separately in the development environment can not be updated in a timely manner, I will change the development environment does not extract, production environment only extract CSS files.

// build/webpack.config.js // node.js const path = require("path"); Const htmlWebpackPlugin = require('html-webpack-plugin'); Const VueLoaderPlugin = require('vue-loader/lib/plugin'); // copy static resources const copyWebpackPlugin = require('copy-webpack-plugin'); Module.exports = {main: path.resolve(__dirname,".. /src/main.js"}, // output: {// Output path: path.resolve(__dirname,".. /dist"), // Generated js file after packaging, withhashFilename:"js/[name].[hash:4].js"// Generate the chunk filename chunkFilename:"js/[name].[hash:4].js"// The reference path of the resource (this depends on the configuration of your package) publicPath:"/"
  },
  module: {
    rules: [
      {
        test: /\.jsx? $/, exclude: /node_modules/, use: [ { loader:'babel-loader'}]}, {test: /\.css$/, //'style-loader',
          },
          {
            loader: 'css-loader',}]}, {test: /\.(jpe? g|png|gif)$/i, use: [ { loader:'url-loader', options: {// if the file size is larger than 5kb, go to the configuration of file-loaderlimit: 5120, // This parameter should be set tofalse[Object Module] esModule:false// If the file size is larger than 5KB, go to the file-loader fallback configuration:'file-loader'// Generate path and filename name:'images/[name].[hash:4].[ext]'}}]}, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/, use: [ { loader:'url-loader',
            options: {
              limit: 5120,
              esModule: false,
              fallback: 'file-loader',
              name: 'media/[name].[hash:4].[ext]'}}]}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/i, use: [ { loader:'url-loader',
            options: {
              limit: 5120,
              esModule: false,
              fallback: 'file-loader',
              name: 'fonts/[name].[hash:4].[ext]'}}]}, {test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false}}}]}, plugins: [new htmlWebpackPlugin({// specify template: path.resolve(__dirname,'.. /public/index.html'Filename: path.resolve(__dirname,'.. /dist/index.html'}), new VueLoaderPlugin(), // Create a new miniCssExtractPlugin instance and configure new miniCssExtractPlugin({filename:'css/[name].[hash:4].css',
      chunkFilename: 'css/[name].[hash:4].css'}), // Compression CSS new optimizeCssnanoPlugin({sourceMap: true,
      cssnanoOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true},}],},}), // Copy static resources new copyWebpackPlugin([{from: path.resolve(__dirname,'.. /public'),
      to: path.resolve(__dirname, '.. /dist')
    }])
  ],
  resolve: {
		aliasImport Vue from: {// import Vue from'vue'
      'vue$': 'vue/dist/vue.runtime.esm.js'Import API from; //'@/api/api.js', save the trouble of finding a path to locate to SRCThe '@': path.resolve(__dirname, '.. /src'}, // add a resolve.extensions attribute so that we can import dependencies or files without the suffix // Import API from when importing files'@/api/api'. extensions: [The '*'.'.js'.'.vue']}};Copy the code

6.2, webpack. Dev. Js

// build/webpack.dev.js // import webpack const webpack = require('webpack'); Const webpackCommonConfig = require('./webpack.config.js'); Const merge = require(const merge = require('webpack-merge'); Module. exports = merge(webpackCommonConfig, {// none production development)"development",
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'}, {loader:'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'} ] } ] }, plugins: [/ / auxiliary HotModuleReplacementPlugin plugin new webpack NamedModulesPlugin (), / / enable hot update must be new webpack HotModuleReplacementPlugin ()], devServer: {// This can only be accessed from localhost:9000 by default. Now it can be accessed from local LAN IP, such as 192.168.12.21:9000.'0.0.0.0',
    hot: true,
    port: 9200,
    contentBase: './dist'}});Copy the code

6.3, webapck. Prod. Js

// build/webpack.prod.js // introduce a plugin to clean up the packaged files. Const {CleanWebpackPlugin} = require(CleanWebpackPlugin)'clean-webpack-plugin'); Const merge = require(const merge = require('webpack-merge'); Const webpackCommonConfig = require('./webpack.config.js'); Const webpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; Module. exports = merge(webpackCommonConfig, {// none production development)"production",
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/, use: [ { loader: MiniCssExtractPlugin loader, / / using miniCssExtractPlugin loader instead of style - loader}, {loader:'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpackBundleAnalyzer({
      analyzerMode: 'static'})]});Copy the code

After configuring the relevant files, we can modify the scripts in package.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack-dev-server --config ./build/webpack.dev.js"."build": "webpack --config ./build/webpack.prod.js"
},
Copy the code

The 2019-12-30 update

new

Added code style detection (for Vue+VSCode)

For the first Vue project, you need to install the VSCode plug-in.

Vetur is used to identify Vue files
ESLint JS code specification inspection
Prettier-code formatter Automatically formatting the Code style

Here we are mainly configuring Eslint. Once configured, your project will have more detailed code style-related prompts during development. Rules can be customized so that different companies and teams can customize their own configuration. (I chose the Standard specification here)

First we need to install various dependencies, starting with the core ones

npm install eslint eslint-plugin-vue -D
Copy the code

The core of ESLint.
Eslint-plugin-vue Is an official vue plugin used to check templates, js, etc in.vue files.

Next, the surrounding extension:

npm install babel-eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
Copy the code

Babel-eslint lint for all valid Babel code.
Eslint-config-standard contains the standard ESLint code style. Of course, you can choose from other standards, such as Google’seslint-config-google“From Airbnbeslint-config-airbnbThese plug-ins all have front-dependency requirements. You can use this command to check front-dependency requirements. Standard is an examplenpm info "eslint-config-standard@latest" peerDependenciesThat’s why import, Promise, node, etc are installed.

Eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node A pre-dependency for eslint-config-standard

After the installation, go to the next step and create a new.eslintrc file in the project root directory.

touch .eslintrc
Copy the code

Add the following configuration information to the file, which is only the most basic configuration.

{
  "root": true."env": {
    "node": true."browser": true
  },
  "parserOptions": {
    "parser": "babel-eslint"."sourceMap": "module"."ecmaVersion": 7},"extends": [
    "plugin:vue/essential"."standard"]."rules": {
    "semi": "off"// Rule that semicolons cannot be used after closing statements"space-before-function-paren": "off"// Close the function to declare the rule that parentheses must be preceded by a space"no-trailing-spaces": "off", // turn off to disable end-of-line whitespace"eol-last": "off"// Turn off the requirement or disallow blank lines at the end of the file"comma-dangle": "warn"// Trailing comma is only a warning, not an error}}Copy the code

We can also configure real-time build verification by adding the following loader to webpack’s module->rule (in webpack.dev.js)

Install eslint – loader

npm install eslint-loader -D
Copy the code

Completes the configuration

Module: {rules: [{// Use this to pre-implement loader, we know that loader has a loading order, and the loading order is required. Eslint-loader enforce:'pre'.test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /node_modules/
    }
  ]
}
Copy the code

Once added, you can test your project to see if there are any warnings or errors, such as defining an unused variable.

let temp;
Copy the code

You can also create an.eslintignore file at the root of your project to ignore files or folders you don’t want to check, such as the node_modules folder

node_modules
Copy the code

If you don’t want to manually modify esLint to throw rule errors, you can use scripting commands to add the following code to package.json:

scripts: {
  "lint": "eslint --fix --ext .js,.vue src"
}
Copy the code

Then execute:

npm run lint
Copy the code

This will fix most formatting problems, but if not, you have to manually fix them.

This completes esLint configuration, please refer to the official documentation for more detailed rule configuration.

Enable ESLint detection at Git commit time

We can be even stricter by not submitting code that does not conform to the specification. (Git hooks are used here.)

First we need to install a dependency:

npm install husky -D
Copy the code

Then create a new.huskyrc file in the root directory. Add the following code to it:

{
  "hooks": {
    "pre-commit": "npm run lint:commit"}}Copy the code

Add a new script to package.json:

  "lint:commit": "eslint --ext .js,.vue src"
Copy the code

This way you check the style of your code every time you submit it.

As a side note, esLint’s default error message doesn’t look very friendly, so you can use this tool to convert the format

Install dependencies:

npm install eslint-friendly-formatter -D
Copy the code

Add the following code to webpack.config.js:

{
  enforce: 'pre'.test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  exclude: /node_modules/,
  options: {
    formatter: require('eslint-friendly-formatter')}}Copy the code

See article Link address link address Link address Link address Link address Link address

Display the error on the browser page

Normally our error can only be seen in the browser’s console panel, we can display it directly to the interface.

Add overlay to devServer property:

devServer: {
  host: '0.0.0.0',
  hot: true,
  port: 9200,
  contentBase: './dist',
  clientLogLevel: "error"// Turn off displaying messages on the browser console. Possible values are None, Error, warning, or info (the default). Here I set it to display only error messages overlay: {errors:true,
    warnings: true}}Copy the code

After executing the NPM run dev command, make the information displayed on the console look better

The default execution of webpack-dev-server gives the console a bunch of output that looks a bit annoying. The following figure

If we want to display beautiful information, we need to do the following configuration, first configure the devServer option in webpack.config.js.

devServer: {
  host: '0.0.0.0',
  hot: true,
  port: 9866,
  contentBase: './dist',
  clientLogLevel: 'error',
  overlay: {
    errors: true,
    warnings: true
  },
  quiet: true
}
Copy the code

We set quiet to true so we can’t see the long output, and we need a plug-in to take over the output. Install the plug-in

npm install friendly-errors-webpack-plugin -D
Copy the code

Add the following statement to webpack.config.js

const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); Plugins: / / /... omit the statement of new friendlyErrorsWebpackPlugin ()]Copy the code

That will do. The resources

The last

This is the end of the configuration, and we will continue to update the optimization content, such as code splitting, this article is just how to build an environment and run, not optimization related content. If there are mistakes, please communicate and point out that you feel good and then go!

I have submitted the relevant code to the warehouse, the link address

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue mobile terminal development environment based on Webpack4 – build chapter

Writing in the front

start

Initialize a project

2. Install WebPack

3. Configure related tools

3.1 ES6+ to ES5

3.2. Configure the CSS preprocessor

3.3. Creating Html files and related processing

3.4. Configure the processing of fonts, pictures and other files

3.5. Let WebPack recognize vUE files

3.6. Configure postCSS

3.7. Configure hot update

4. Define environment variables

5. Integrate Vue family bucket

6. Distinguish between development and production environments

6.1, webpack. Config. Js

6.2, webpack. Dev. Js

6.3, webapck. Prod. Js

new

Added code style detection (for Vue+VSCode)

Enable ESLint detection at Git commit time

Display the error on the browser page

After executing the NPM run dev command, make the information displayed on the console look better

The last

Vue mobile terminal development environment based on Webpack4 – build chapter

Writing in the front

start

Initialize a project

2. Install WebPack

3. Configure related tools

3.1 ES6+ to ES5

3.2. Configure the CSS preprocessor

3.3. Creating Html files and related processing

3.4. Configure the processing of fonts, pictures and other files

3.5. Let WebPack recognize vUE files

3.6. Configure postCSS

3.7. Configure hot update

4. Define environment variables

5. Integrate Vue family bucket

6. Distinguish between development and production environments

6.1, webpack. Config. Js

6.2, webpack. Dev. Js

6.3, webapck. Prod. Js

new

Added code style detection (for Vue+VSCode)

Enable ESLint detection at Git commit time

Display the error on the browser page

After executing the NPM run dev command, make the information displayed on the console look better

The last

Related Posts

Chapter 7, Section 2 DOM 3-12 encapsulates node relational functions — encapsulates all of the element siblings of an element that the function obtains

Please accept this amazing CSS technique

Gitlab automatic deployment one: Ali Cloud installation Gitlab notes