There are indeed a lot of webpack related articles, but it is not easy for me to master this technical path after a round of reading, and various groping is still needed. In order to save some detdettions for those who may read this article later, I have recorded my exploring path about Webpack and VUE. Webpack concepts are covered but not explained here, please refer to the documentation.

Online article search out, many from Vue – Cli hands, however, this kind of highly integrated scaffolding tools, used as a business development is very quick, but, for understanding of basic technology process, is not suitable, I of this series of articles, hope to start from the most basic, manually set the webpack and Vue development environment.

Webpack use:

1. Install webPack-related packages

npm install webpack webpack-cli webpack-dev-server -g
Copy the code

After installation, the current version is as follows:

Webpack 5.44.0; Webpack – cli 4.7.2; Webpack dev – server 3.11.2

The global installation is not installed in devDependencies to facilitate manual operations, which are installed in devDependencies during development.

2. Use of Webpack in native JS

Create a project directory and create three files:

The contents of the documents are as follows:

index.html

<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < script SRC =". / SRC/index. Js "> < / script > < / body > < / HTML >Copy the code

moduleA.js

export default function(){    document.write('this is a message from Module')}
Copy the code

src/index.js

import moduleA from '.. /moduleA'document.write('a infomation from JS')moduleA()Copy the code

Uncaught SyntaxError: Cannot use import statement outside a module

Because import is ES6 syntax, the browser does not recognize it.

What Webpack does is package files that the browser doesn’t recognize into files that the browser does.

Since Webpack has been installed globally, you can package the files by typing “webpack” in the terminal. The default package entry for Webpack is/SRC /index.js, so you can use Webpack to package the result bits /dist/main.js without additional configuration

/dist/main.js’ instead of ‘./ SRC /index.js’ in the indexl.html script reference, run the HTML file and get the result:

At this point, the application case of Webpack in native JS is complete.

The use of Vue

The use of Vue, refer to the Vue official documentation, through the script tag in HTML file to introduce the Vue library, and then create a Vue object, mount to the DOM element. I won’t go into details here, but I’ll elaborate on a little pitfall that Vue encounters with Webpack.

Use webPack in combination with Vue

The combination of Webpack and Vue, and the native case of Webpack is actually very similar, through NPM after installing vue, the

import moduleA from '.. /moduleA'Copy the code

Replace with

import Vue from 'vue'
Copy the code

Then, use Webpack packaging, packaging js files, through script tags, into the HTML file.

However, this simple operation does not get the desired result, because Vue installed via NPM imports with vue.runtime.mon.js by default

This can be found in node_module/vue/package.json.

  "main": "dist/vue.runtime.common.js"
Copy the code

To reference vue correctly in a webpack+vue project, you need to configure it in the webpack.config.js file.

This file was not mentioned before, and now needs to be created and placed under the root of the project.

When this file is not present, WebPack will have its own default Settings, and when the file is present in the root directory, WebPack will read the configuration in the file.

webpack.config.js

const path=require('path')module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js',}, devServer:{//dev server configuration, Port :8080, publicPath:'/dist'}, module:{//webpack loader use:['style-loader','css-loader'] }, { test: /.vue$/, loader: 'vue-loader' }, ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, }, };Copy the code

In the WebPack configuration file, resolve alias points vue to vue.esm.js so that vue can be referenced correctly in the WebPack +vue project.