Webpack4.5.0+vue2.5.16+vue-loader Real-case component development cases and some of the pits that have been trampled in these versions!!!

A Vue-loader

We don't care about scaffolding, just talk about Vue-loader, simply say that you can package the. vue file for component development, that is, a. vue file is a component that only needs to be introduced in development. VUE components on it!

Then the features of the. Vue file:

,

That is, a. Vue contains templates, js,css three modules to describe this component!

Second new Webpack project (Super Multi-pit, for each)

Start by creating a new demo directory, initializing NPM init--yes, and then installing Webpack and webpack-dev-server, because I don't have a specific version here, so I've installed the latest version of 4.5.0 directly, resulting in a lot of configuration pits!, and then build the project structure, such as:

,

Then install some of the necessary components:

[Email protected], this I first installed in practice 8.5.4, and then always error can not read ' vue ', file error display is vue-loader/lib below the JS, according to the experience must be the wrong version caused,

There are two solutions at this time:

One or modify the version of Webpack,

Two or modify the version of Vue-loader

Here I use modified Vue-loader version, pro-Test if it is [email protected],[email protected] Other version basic all error, really pit!

Then there are the other Laoder:

, and then there is a point, if you want to use import, but also to install Babel:

,

Finally--save install Vue, note the best in front to--save-dev installation, and then install the Html-webpack-plugin plug-in to facilitate HTML packaging

Three Webpack configuration

The configuration is as follows:

Const Path=require (' path ') Const Htmlplugin=require (' Html-webpack-plugin ') Module.exports={entry:{entry:'./src/index.js '//Entry File}, output:{path:path.resolve (__dirname,' Dist '),//The absolute path to Dist, the syntax of nodeFileName: './js/[name].js ',//the JavaScript file name after packing}, Resolve: {extensions: ['. js ', '. Vue '],//package the. Vue file at the same timealias:{' vue$ ': ' Vue/dist/vue.js '//enable aliases so that you can directly reference ' Vue '}}, module:{rules:[//Configure Vue-loader to, Vue end files are packaged using Vue-loader{test:/\.vue$/, use:{loader:' Vue-loader '                }            },            //Configure Babel, all. js files using Babel conversion{test:/\.js$/, use:{loader:' Babel-loader ', options:{presets:["Es2015"//parsing ES6                        ]                    }                },                //Exclude plug-in installation directoryExclude:/node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//            }        ]    },    //HTML Packaging Pluginplugins:[NewHtmlplugin ({hash:true, Template:'./src/index.html '})], devserver:{//the path of the listening service, automatic hot update of more than 3.6 versionContentBase:path.resolve (__dirname, ' dist ')), Host:' localhost ', Compress:true, Port:8082    }}

After the configuration is complete, create a new. Vue component file, and then simply write an example:

Here's a pit:

,

Cannot write directly 123,template tag inside must write an element label package, otherwise will error

After the new is introduced, the Index.js entry file is as follows:

Import vue from' vue './app.vue '   // introduced, Vue component new  vue ({    el:' #vue ',    data:{        msg:' haha '    },    components:{        ' app ': App   // components that introduce a modular. Vue file     }}); {    alert (123);}

There's another pit here, when I introduced Vue, and now this version doesn't seem to be directly ' vue ', it's ' vue/dist/vue.js ', unless you configure aliases in the config file, I've already configured them, so you can use aliases directly here.

, and then create a new HTML:

<! DOCTYPE html>                {{msg}}            <app>< /app>        </div>    </body>
, finally packaged to observe the results, found that. Vue has been successfully used, and if we still want a component, we can continue with the new. Vue component development, a component is a module! Aside from scaffolding, this kind of development and thought is worth savoring, haha! This simple example is here, Other CSS styles can be tried on their own!
In other words, webpack3.6 more than the version will automatically support hot update, no additional configuration, more than 4.0 version, packaging and running the command more than one--mode option, and is required to write:
That's what I'm configuring now in Package.json's order:
"Scripts": {"Server": "Webpack-dev-server--mode development--open", "Build": "Webpack--mode development"},NPM run SE RVer running NPM run build directly; Pack it up! Run Result:
Webpack4.5.0+vue2.5.16+vue-loader Real-case component development cases and some of the pits that have been trampled in these versions!!!