Webpack Configuration Process Logging

Vue Project Combat Record, address in this shopping cart single interface

Run up to see the interface effect

Here's a simple record of Webpack's compilation process.

Entrance Package.json

" Scripts " : {    "dev""node build/dev-server.js"//  npm Run Dev, execute here "    build""node build/ Build.js"  },

The Dev-server.js file under the build file

var config = require ('.. /config')//introduction of a configuration file, runtime and a profile at development timevar webpack= Require ('Webpack') var opn= Require ('OPN') var proxymiddleware= Require ('Http-proxy-middleware')//an intermediate chain of HTTP protocol proxiesvar webpackconfig = require ('./webpack.dev.conf')//currently the development environment, so it is dev.conf

Import file for webpack.dev.conf

var config = require ('.. /config') var webpack= Require ('Webpack') var merge= Require ('Webpack-merge') var utils= Require ('./utils') var basewebpackconfig= Require ('./webpack.base.conf')//Import the underlying configuration filevar htmlwebpackplugin = require ('Html-webpack-plugin')//Webpack provides a plugin for manipulating HTML//See Demo notes for details

webpack.base.conf file

var path = require ('Path') var config= Require ('.. /config') var utils= Require ('./utils') var projectroot= Path.resolve (__dirname,'.. /')//defines the root directory of the current projectentry: {app:'./src/main.js'  //This is the definition of the entry file.}, Output: {path:config.build.assetsRoot,//The output file path, corresponding to the config file plus the assetsroot path of the Index.js filePublicPath:process.env.NODE_ENV==='Production'?config.build.assetsPublicPath:config.dev.assetsPublicPath, FileName:'[Name].js' //a key to the corresponding entry, this is the app, and that's how App.js got it.Resolve: {//related configuration of the moduleExtensions: ["','. js','. Vue','. JSON'],//suffix that can be fully auto-complementFallback: [Path.join (__dirname,'.. /node_modules')],//when the current end module can't find it, look it up from Node_modules.alias: {//the provided aliases      'vue$':'Vue/dist/vue.common.js',      'src': Path.resolve (__dirname,'.. /SRC'),      'Assets': Path.resolve (__dirname,'.. /src/assets'),      ' Components': Path.resolve (__dirname,'.. /src/components')} module: {//loaders: [{//compile time processing, such as here, for all the JS suffix file Babel loader do processingTest:/\.js$/, Loader:'Babel', Include:projectroot,//Check the files in this directoryExclude:/node_modules///exclude files from this directory      },{//here is a query operation, more than 10KB files, the file name processingTest:/\. (png|jpe?g|gif|svg) (\?. *)?$/, Loader:'URL', query: {limit:10000, Name:utils.assetsPath ('Img/[name]. [Hash:7]. [Ext]'}}, there is a eslint, do the demo when I generally directly removed, because the format of the error hint is very blue, interested can Googlevue: {//CSS file configuration, specifically see utils.cssloaders functionloaders:utils.cssLoaders ({sourcemap:usecsssourcemap}), Postcss: [Require ('Autoprefixer') ({browsers: ['Last 2 versions']}) [}dev ]-Server.jsmodule.exports=App.listen (port, function (err) {//start the server listening port, which is 8080, configured in dev//start Web page via localhost port  if(Err) {Console.log (err)return} var uri='http://localhost:'+Port Console.log ('Listening at'+ URI +'\ n')  //When env is testing, don ' t need open it  if(Process.env.NODE_ENV!=='Testing') {opn (URI)}})

Recently learning Vue.js high imitation hungry of the actual combat project, there is need to tell me the video, to link.

Webpack Configuration Process Logging