Vue2.0---webpack packaging knowledge points-2

Post a detailed analysis of the Webpack configuration for vue-cli#2.0:

https://zhuanlan.zhihu.com/p/24322005

First, look at the packaging process of Webpack

1, "script" in Package.json "Build": "Node Build/build.js",

var webpackconfig = require ('./webpack.prod.conf ') in Build.js

2, so we enter into the webpack.prod.conf.js, and then require ('./webpack.base.conf ')

3, into the webpack.base.conf.js----focus in the Module.exports: because we are now considering a single entrance, so entry is generally main.js,

For the Librarytarget attribute in the export file: There are four attribute values------umd,amd,commonjs,commonjs2. If we want to develop some tool libraries, these libraries can be used both COMMONJS and

The use of AMD can also be introduced in script mode. Usually we use the UMD method to complete the package, the browser can recognize. The project is working properly, but using AMD will cause an error---prompt in packaging

After the App.js define is not defined , using the commonjs method, will be error---Prompt in the packaging after the app.js exports is not defined; Use commonjs2 method, will error---Prompt in the packaging after the App.js moduleis not defined;

Note: Thedependencies of AMD and CMD are determined by the parameters of the define, i.e. define(‘B‘, [‘A‘], () => {}) the name of the current module is B, and depends on the a module. But in fact amd and CMD, the first parameter is not set, because there is a problem, COMMONJS usage specification is dependent on a module to require come in, exposing this module for other modules to use exports.

4, our most commonly used modular scheme is COMMONJS2 and UMD, the former is for the node environment, the latter is for the browser environment. If only the project, the Librarytarget attribute can be added, if it is a product, it needs to be discussed separately.

5, the understanding of externals attribute is still shallow-----

Webpack if you want to not package references to third-party class libraries, frameworks, custom plug-ins, and so on, you can set this property;

Externals usage scenarios are external dependencies that do not need to be packaged into an output file.

Externals: {    jquery: ' jquery ',}

　　　　Finally, the understanding of Librarytarget is also a hazy state.

Above.

Vue2.0---webpack packaging knowledge points-2