The Webpack of Nodejs+webpack+vue

Webpack is a module loader and packaging tools, JS, style, pictures are used as modules and processing. There is a profile webpack.config.js under the project to tell Webpack what needs to be done, the Webpack.config.js file of this project is as follows:

Introducing Modules:

var path = require ('path')var webpack = require ('  Webpack')

Portal file and output file configuration:

The portal file can be configured through the entry node, and multiple portal files are supported, and each template will have only one entry file.

The output file can be configured through the Oupput node, the file name of the output is configured according to the entry file, and the corresponding content of [name] is the key that should be under the entry node, as follows, the output/dist/builg.index.js and dist/ Build.user.js of two files.

Module.exports = {
  //Portal File entry: {index:'./src/index.js', User:'./src/user.js'  },
  //Export file output : {path:path.resolve (__dirname,'./dist'), Publicpath:'/dist/', FileName:'build. [Name].js'  }}

Module Loader:

It tells Webpack each kind of file needs to use what loader to handle, the commonly used loader has style-loader,css-loader,sass-loader,url-loader;

Module.exports ={module: {rules: [{
        //Output the Vue file as a component test:/\.vue$/, Loader:'Vue-loader', Options: {loaders: {'Scss': Extracttextplugin.extract ('Vue-style-loader!css-loader!sass-loader'),            'Sass': Extracttextplugin.extract ('Vue-style-loader!css-loader!sass-loader?indentedsyntax')          }                 }      },      {
　　　　 //Translate the ES6 code in all directories into the ES5 code, but do not include the file test under the Node_modules directory :/\.js$/, Loader:'Babel-loader', exclude:/node_modules/      },      {
　　　　 //For packaging picture test:/\. (png|jpg|gif|svg) $/, Loader:'File-loader', Options: {name:'[name]. [ext]? [Hash]'        }      },      {
　　　　 //Translate the Scss file into a CSS file test:/\.scss$/, Loader:ExtractTextPlugin.extract ({fallbackloader:'Style-loader', loader:'Css-loader!sass-loader' })      }    ]  }}

Alias settings:

After setting the alias, you do not need to write the real path, just use aliases instead, such as: Require (' Httphelper ').

Resolve: {    alias: {      'vue$'vue/dist/vue.common.js ',
' Httphelper ': ' src/util/httphelper.js '    }}

Plugin configuration:

Extract-text-webpack-plugin plug-ins do not package styles into scripts, but instead package style files independently, creating new CSS files.

//Style pack var extracttextplugin = require (' Extract-text-webpack-plugin ');

Plugins: [
New Extracttextplugin ("./[name].css")
]

To build the local server:

Built on node. JS, the server allows the browser to monitor code modifications and automatically refreshes with the default port of ' 8080 '.

Installation: NPM Install--save-dev Webpack-dev-server

devserver: {    true,    true}

Determine whether the production environment or the development environment:

The configuration of node_env in the following code is related to the content under the Scripts node under the Package.json file, and the plug-in configuration in Module.exports.plugins is merged into Plugins:[new Extracttextplugin ("./[name].css")].

if(Process.env.NODE_ENV = = ='Production') {Module.exports.devtool='#source-map'Module.exports.plugins = (Module.exports.plugins | |[]). Concat ([NewWebpack. Defineplugin ({'process.env': {node_env:'"Production"'      }    }),    NewWebpack.optimize.UglifyJsPlugin ({sourcemap:true, compress: {warnings:false      }    }),    NewWebpack. Loaderoptionsplugin ({minimize:true    })  ])}

The complete code is as follows:

varPath = require ('Path')varWebpack = require ('Webpack')
//Style packaging varExtracttextplugin = require ('Extract-text-webpack-plugin') Module.exports={
//Ingress file configuration entry: {index:'./src/index.js', User:'./src/user.js'  },
//Output file configuration output: {path:path.resolve (__dirname,'./dist'), Publicpath:'/dist/', FileName:'build. [Name].js'}, module: {rules: [{
　　　　 //Output the Vue file as a component test:/\.vue$/, Loader:'Vue-loader', Options: {loaders: {'Scss': Extracttextplugin.extract ('Vue-style-loader!css-loader!sass-loader'),            'Sass': Extracttextplugin.extract ('Vue-style-loader!css-loader!sass-loader?indentedsyntax')          }                 }      },      {
　　　　 //Translate the ES6 code in all directories into the ES5 code, but do not include the file test under the Node_modules directory :/\.js$/, Loader:'Babel-loader', exclude:/node_modules/      },      {
　　　　 //For packaging picture test:/\. (png|jpg|gif|svg) $/, Loader:'File-loader', Options: {name:'[name]. [ext]? [Hash]'        }      },      {
　　　　//Translate the Scss file into a CSS file test:/\.scss$/, Loader:ExtractTextPlugin.extract ({fallbackloader:'Style-loader', loader:'Css-loader!sass-loader'})}]}, resolve: {
　　//Set aliases alias : {'vue$':'Vue/dist/vue.common.js'}}, Plugins: [
  //Style output path NewExtracttextplugin ("./[name].css")], Devserver: {historyapifallback:true, Noinfo:true}, Performance: {hints:false}, Devtool:'#eval-source-map'}if(Process.env.NODE_ENV = = ='Production') {Module.exports.devtool='#source-map'Module.exports.plugins = (Module.exports.plugins | |[]). Concat ([NewWebpack. Defineplugin ({'process.env': {node_env:'"Production"'      }    }),    NewWebpack.optimize.UglifyJsPlugin ({sourcemap:true, compress: {warnings:false      }    }),    NewWebpack. Loaderoptionsplugin ({minimize:true    })  ])}

Nodejs+webpack+vue Webpack