Webpack Building Vue Project (again on configuration)

Webpack configuration is really troublesome, this does not, before using just with the vue1+ version, results in (part) of the Android test, found that there is open unloading (dev-server) case can not recognize the Vue grammar problem, tried a lot of methods, have not been able to solve the good, Finally the Vue upgrade to 2 +, unexpectedly can recognize, OK!

1. First share some of the different Webpack configuration vue2+ (i test):

(1) The Vue default installation in dependencies 2 +, run directly, will report the following error: [Vue warn]: Failed to mount Component:template or render function not defined.
If the dependencies in the Vue select ^1.0.26, then the corresponding vue-loader in Devdependencies best choice ^7.3.0,vue-hot-reload-api best Choice ^1.2.0, otherwise it will be an error.
(2) If Vue chooses to install 1+,dependencies in the Vue-router it is best to choose ^0.7.13 (default installation 2 +, Router.map () This method is not recognized).
(3) If Vue chooses to install 1+,dependencies in Vue-validator it is best to select ^2.0.0 (default installation 2.1.7).
(4) If Vue chooses to install 1 +, then when the Webpack Dev server is turned on, the Android phone in the same intranet will be able to access the output page of the local device without the compatibility problem of the Vue syntax, and the iOS phone can access and parse it normally. However, this compatibility issue does not occur when the other server is turned on, so it is recommended that Vue choose the version of 2.0 to install for easy testing.
(5) If Vue chooses to install 2+,vue2.0 There are two build modes that run the build by default, but cannot parse the single-file template, so to use standalone builds, you need to specify vue$ 's module alias address in Alias, that is, the

 //  other solutions   Resolve: { //  require omit extension, The end of the. Vue is also going to load  extensions: [', '. js ', '. Vue ' ],  //  module alias address, convenient for subsequent direct reference aliases, do not need to write a long address, note that if the alias is not recognized later, you need to first set root  root:". /node_modules " ' vue$ ': ' Vue/dist/vue.js '     }}, 

(6) If Vue chooses to install 2 +, the corresponding Vue-validator must install 3 +, otherwise it will error, but in this way, when the Webpack Dev server is turned on, the Android phone does not recognize vue-validator compatibility issues, iOS phones can be accessed and parsed normally, so for testing convenience, use other Vue-based form validation plugins, called Vuerify, to introduce vue2+, Vuerify, and V-vuerify-next.
(7) If Vue chooses to install 2 +, the loader involved will try to upgrade to the latest, otherwise it would error It is best to upgrade Vue to 2.0.7, corresponding Vue-loader upgrade to 8.5.4,vue-html-loader upgrade to 1.2.3,VUE-HOT-RELOAD-API upgrade to 2.0.6.
(8) If Vue chooses to install 2 +, the corresponding router will be upgraded to 2 +, but the form validation plug-in that was used before is problematic (for example: Vue-validator-3.0.0-alpha.1 and vuerify+ V-vuerify-next These two plug-ins in the route jump when the error, try a lot of methods are useless, feel or version matching problem), Awesome-vue gathered from the community contributed thousands of plugins and libraries, here I looked for some specifically for vue2+ Form validation plug-in, found Vee-validate and vue-easy-validator the two plug-ins did not appear before the problem, and the former English documents written in quite detailed, praise.

2. Do not underestimate the version matching problem, Webpack comes with plug-ins and third-party plug-ins, Vue and the need to introduce the plug-ins, plus a variety of module loaders, sometimes matched to one, the other will be a problem, I was here to waste too much time, finally simply follow the version, strong hug. About vue2+ Grammar, the official website is written in detail, here do not repeat, I will continue to talk about Webpack configuration problems:

(1) Entry and exit in the configuration file:

//The entry file, where the path is relative to the location of the file, can be written as a string, array, Objectentry: {    //here is the entry path for a single pageIndex:path.resolve (__dirname, "... /entry/index.js "),    //groups that need to be extracted as public modulesVendors: ["Vue", "Vue-router", "Vue-resource", "Vee-validate", "jquery"],},//Output Configurationoutput: {//The output of the JS file, the path relative to the location of this filePath:path.resolve (__dirname, "... /output/js/"),    //in the portal file involved in the synchronous loading of the JS file into a JS file, based on the file MD5 generated hash name script to prevent the cacheFileName: "[name]. [Hash].js],    //a business module that is loaded asynchronously, such as an on-demand. Vue Single File ComponentChunkfilename: "[id]. [Name]. [Chunkhash].js]}

Here are a few points to pay attention to, I mainly say two:

One is Publicpath, last said test environment written config.output.publicPath = "/", not recommended in the production environment to move it, but the recent export of files if not set Publicpath, The script path in the. Vue single-file component that is loaded on demand will give an error, so you still have to set Publicpath, whose path can be written relative to the location of the generated HTML single file;

Another is Chunkfilename, the last time did not mention it, the main is not how to use it, if the project involves the asynchronous loading of the business module, you have to mention it. If you use AMD-style Requirejs to implement lazy loading of routing components, for example:

Const Register = Resolve = require ([".. /src/private/components/register "],resolve);

This component will not be packaged with the JS file introduced in entry, but packaged separately into a JS file, the name is the chunkfilename here, with an automatically assigned, poorly readable [id]. If you want to be more of a sense of belonging when naming, take a [name], you can use Require.ensure to implement lazy loading of the routing component, for example:

Const Register = Resolve = Require.ensure ([".. /src/private/components/register "], () = Resolve (Require (". /src/private/components/register "))," Register ");

If you want to package all the components under a route in the same asynchronous chunk, you do not need to explicitly list the dependencies of Require.ensure, that is, the empty array is OK. If you also want to execute some code while loading a module on demand, you can write:

Const Register = Resolve = = {    require.ensure ([". /src/private/components/register "], () = {        //  Here you can write the code resolve before the specified module is loaded asynchronously        ( Require (".. /src/private/components/register "));         // Here you can write the code after the specified module is loaded asynchronously    }, "register")}

(2) after writing Config.output.publicPath = "/" In the test environment, many relative paths under the current profile are set relative to this, that is, many of the relative paths involved need to change accordingly. Otherwise open Dev-server will be error to find file errors, then what needs to change, I personally suggest to change the following several places:

The path of some module loaders, such as the url-loader of loading pictures and the file-loader of loading icons;

The path of some plug-ins, such as Htmlwebpackplugin that generate a single HTML file, extract the Extracttextplugin of the CSS single file

(3) In order to prevent "cannot find Favicon.ico file" the interference caused by this error, find a picture plug into the project root directory, the output time directly in the new Htmlwebpackplugin plug-in parameter sequence to write Favicon: "Favicon.ico", Then open dev-server will not error, but the production environment will be error, because the export location and output of the JS file peer, so you have to plug it into and output the HTML file peer, here I use the Copywebpackplugin this plugin (third-party plug-in), The code is as follows:

// copies the specified file to the specified directory New Copywebpackplugin ([    /// from is the source file name, where the location is in the project root directory, to is to write to copy the past directory location, relative to the output of the JS file    {from: ' Favicon.ico ', to: '. /html/favicon.ico "}])

(4) for the. Vue single file, the CSS default is the internal style, now the CSS inside it will be extracted into an external import, but if the. Vue single-file component is loaded on demand, then this setting is not valid, it will be back to the internal style (or perhaps I am mistaken), the code is as follows:

Vue: {    loaders: {        css:ExtractTextPlugin.extract (' vue-style-loader ', ' Css-loader '),    } }

(5) Config.devtool this is to see their own preferences, the development environment recommended the use of CHEAP-MODULE-EVAL-SOURCE-MAP, production environment recommended the use of Cheap-source-map or Source-map, the latter to get the. Map file volume is larger, but can be completed Full restore of the previous JS code

(6) If you want to extract the public module inside the portal file, the configuration file must have the following three steps:

entry: {        //  path.resolve ([from ...] to) resolves the to parameter to an absolute path        index:path.resolve (__ DirName, '. Index.js '),        //  group that needs to be extracted as a public module        vendors:[' vue ', ' vue-router ', ' jquery ' ]},new  webpack.optimize.CommonsChunkPlugin ({        ' vendors ',        ' Vendors.js '

The third step is the new Htmlwebpackplugin plug-in parameter column in the chunks must be introduced vendors;

(7) If the CSS is extracted separately, the configuration file must have the following three steps:

var Extracttextplugin = require (' Extract-text-webpack-plugin '); // Add in Module.loaders {      /\.css$/,                        ///  loader: ' Style-loader!css-loader ',      / / extract the styles as separate files      Loader:ExtractTextPlugin.extract ("Style-loader", "Css-loader"),      /node_modules/}  New Extracttextplugin (".. /css/[name]. [Contenthash].css ")

3. Other areas to be aware of:

(1) HTML file is best to write only the HTML-related tag language, try not to import external CSS or JS files, try not to write internal style or write JS code in the <script> tag
(2) When writing URLs in CSS file, pay attention to the path problem, especially in the case of setting Publicpath in the configuration file.
(3) JS file refers to the introduction of the file, you can use require or define or import from, note that the introduction of the premise is introduced into the file has been a modular code specification
(4) If you do not want to introduce a file separately, you can set it in the global Mount plugin, which is different from window mount
(5) Vue components involved in the picture path (mainly src form) error, you can add require () in the path layer, so that the test environment is no problem, but the production environment may also error, the key is to find out the relative path of the two environmental films is relative to WHO
(6) Webpack loading CSS, encountered font-family must remove the attribute value of the space and double quotation marks, otherwise the parsed style will be wrong

Not to be continued ~

Webpack Building Vue Project (again on configuration)