preface

Learned webpack configuration, so far, or quite complex, version problems often out of the bug. Take a note

Know webpack

What is Webpack?

The official explanation:

At its core,webpack is a static module bundlerfor modern JavaScript applications

In essence, WebPack is a static module packaging tool for modern JavaScript applications.

Two points are summarized: module or packaging

And gulp contrast

Gulp puts more emphasis on automation of front-end processes and modularity is not its core. Grunt/GULP can be used if the engineering modules rely on very simple, even without the concept of modularity, and simply merge and compress, if the whole project is managed with modularity. And because the dependencies are so strong, we can use a much more powerful WebPack.

Webpack more emphasis on modular development management, and file compression merge, pre-processing and other functions, it is attached to the function

The installation of the webpack

The premise

In order for Webpack to run properly, it must rely on the Node environment

Install webPack globally

Specify version 3.6.0 because vue CLI2 relies on this version and vue CLI3 hides the Webpack configuration

NPM install [email protected] – g

Partial installation of webpack

NPM install [email protected] – save – dev

Webpack start

In mathutils.js write the following: module.exports export function (add = add:add)

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}
Copy the code

In main.js, write the following: require receives the exported function

Const {add, mul} = require('./mathUtils') console.log(add(20,30)); The console. The log (the mul (20, 30));Copy the code

Index.html terminal, enter the current project directory

/ SRC /main.js./dist/bundle.js.

(Folder name is written as SRCS, changed back to SRC)

At this point, there is a packed JS file in the dist directory

Index.html to introduce the JS file, both can run smoothly

Webpack configuration

Terminal type webpack to package directly

The name must be webpack.config.js. After the configuration is successful, you can directly enter webpack. / SRC /main.js./dist/bundle.js

Package through NPM Run build

Configuration in package.json. This configuration preferentially uses the webpack command for the current project. Locally installed WebPack will be used for local installation, not global

The use of the loader

Webpack Chinese document address

webpackjs.com

CSS file handling

NPM install –save-dev style-loader and NPM install –save-dev csS-loader

Webpack.config.js is configured as follows

Less File processing

NPM install –save-dev less-loader less (vscode can automatically convert less to CSS)

Webpack.config.js is configured as follows

Image file processing

Enter NPM install –save-dev url-loader

NPM install –save-dev file-loader

If there is no error, the picture is not displayed, it is the version of the problem, this knowledge point is a little more, details see notes

Turn es6 es5

We are simply converting from ES6 to ES5, so there is no need to follow the official download

Terminal input: NPM install –save-dev babel-loader@7 babel-core babel-preset- ES2015

Configure Vue in Webpack

Install the vue

Enter: NPM install vue –save

Vue will also be used in subsequent actual projects, so it is not a development-time dependency, so do not add -dev

The introduction of vue

import Vue from ‘vue’

Configure the vue

Runtime-only -> code cannot have any template(default)

Run-time compiler -> Template can be used in code because compiler can be used to compile templates

Solution: Webpack.config.js (same as Module)

Vue ultimate use scheme

Install vue-loader vue-template-compiler –save-dev NPM install vue-loader vue-template-compiler –save-dev

The use of the plugin

copyright

Webpack (const webpack = require(‘webpack’))

Plugins are level with Modules

At this point, the bundle.js first line will add the banner

Packaging Html

Enter: NPM install html-webpack-plugin –save-dev

Import html-webpack-plugin package. There is no need to import JS file in index. HTML file. Remember to clear the path of publicPath Mosaic

Js compressed

Enter NPM install [email protected] –save-dev (this version comes with CLI2) to import the package

In this case, the copyright comment information will be cleared and not used with the comment

Setting up a local Server

Enter NPM install –save-dev [email protected]

This cannot be run using NPM run build, as configured in package.json

Webpack-dev-server –open (run without manual click)

Configuration file separation

Terminal type: NPM install webpack-merge –save-dev

Create a build folder and create three js files (base.config.js to configure prod.config.js to publish configuration dev.config.js to run configuration)