Webpack Summary (Write a beginning to think or not write the official website and other people's blog address)

   About the Webpack information about 3, one is the official website (pure English, more information), one is the Chinese network (not recommended, if you do not know who said a word, speaking of is, but the actual use of calculus is difficult), there are major blogs, knowledge points scattered, no system knowledge structure, So have to slowly according to the official website summary.

Configuration file config: Can be written by itself or by default Webpack init generation

  "scripts": {    "build": "webpack"  },可以用“--”传自定义参数进去，请大胆使用es2015里面的import/export

var path = require(‘path‘);module.exports = {  entry: ‘./app/index.js‘,  output: {    filename: ‘bundle.js‘,    path: path.resolve(__dirname, ‘dist‘)  第一个参数是模块绝对路径  }};

当运行build命令之后就会在当前路径的基础上,参照dist生成文件

安装:

npm install webpack –g 至于全局和局部安装问题，一个是在npm的安装目录下 一个是在项目node_modules下,但是全局安装后还是需要局部安装，因为需要用到require，require无法引入全局安装的模块

"Scripts": {    "start": "webpack--config mywebpack.config.js"}

Here is an example of an official configuration

var path = require (' path '); module.exports = {   entry: "./app/entry

Output: {path:path.resolve (__dirname, "Dist"),Directory of//string outputFileName: "Bundle.js",the name of the//string outputPublicpath: "/assets/",//String static resource directoryLibrary: "mylibrary",//String,    //The name of the exported libraryLibrarytarget: "UMD",//Universal module definition    //The type of the exported library    /* Advanced Output configuration (click to show) */}, module: {rules: [//Rules for modules (Configure loaders, parser options, etc.){test:/\.jsx?$/, include: [Path.resolve (__dirname, "app")], exclude: [Path.resolve (__dirname,"App/demo-files")        ],//These is matching conditions, each accepting a regular expression or string        //test and include the same behavior, both must be matched        //Exclude must not being matched (takes preferrence over test and include)        //Best Practices:        //-use REGEXP only with test and for filename matching        //-use arrays of absolute paths in include and exclude        //-Try to avoid exclude and prefer includeIssuer: {test, include, exclude},//conditions for the issuer (the origin of the import)Enforce: "Pre", Enforce:"Post",//flags to apply these rules, even if they is overridden (advanced option)Loader: "Babel-loader",//The loader which should is applied, it ' ll be resolved relative to the context        //-loader suffix is no longer optional in Webpack2 for clarity reasons        //See Webpack 1 Upgrade GuideOptions: {presets: ["es2015"]        },//Options for the loader}, {test: "\.html$", use: [//Apply multiple loaders and options"Htmllint-loader", {loader:"Html-loader", Options: {/* ... */}}]}, {oneof: [/ * Rules * /] },//Only use one of these nested rules{rules: [/ * Rules * /] },//Use all of these nested rules (combine with conditions to be useful){resource: {and: [/ * conditions * /] } },//matches only if all conditions is matched{resource: {or: [/ * conditions * /]}}, {resource: [/ * conditions * /] }//matches if any condition are matched (default for arrays){resource: {not:/ * Condition * /} }//matches if the condition is not matched],/* Advanced Module configuration (click to show) */}, Resolve: {//options for resolving module requests    //(does not apply to resolving to loaders)Modules: ["Node_modules", Path.resolve (__dirname,"app")    ],//directories where to look for modulesExtensions: [". js", ". JSON", ". JSX", ". CSS"],//Extensions that is usedAlias: {//A list of module name aliases"Module": "New-module",//alias "module", "New-module" and "Module/path/file", "New-module/path/file""only-module$": "New-module",//alias "Only-module", "New-module", but not "module/path/file", "New-module/path/file""Module": Path.resolve (__dirname,"App/third/module.js"),//alias "module", "./app/third/module.js" and "Module/file" results in error      //modules aliases is imported relative to the current context},/* Alternative alias syntax (click to show) */    /* Advanced resolve configuration (click to show) */}, Performance: {hints: "Warning",//enummaxassetsize:200000,//Int (in bytes),maxentrypointsize:400000,//Int (in bytes)Assetfilter:function(Assetfilename) {//Function predicate that provides asset filenames      returnAssetfilename.endswith ('. css ') | |    Assetfilename.endswith ('. js '); }}, Devtool: "Source-map",//enum  //enhance debugging by adding meta info for the browser devtools  //Source-map Most detailed at the expense for build speed.Context: __dirname,//String (absolute path!)  //The home directory for Webpack  //The entry and Module.rules.loader option  //is resolved relative to this directoryTarget: "Web",//enum  //The environment in which the bundle should run  //changes chunk loading behavior and available modulesExternals: ["react",/^ @angular \//],  //Don ' t follow/bundle these modules, but request them at runtime from the environmentStats: "errors-only",//lets precisely control what bundle information gets displayedDevserver: {proxy: {//proxy URLs to backend development server'/api ': ' http://localhost:3000 '}, ContentBase:path.join (__dirname, ' Public‘),//Boolean | string | array, static file locationCompresstrue,//Enable gzip compressionHistoryapifallback:true,//True for index.html upon 404, object for multiple pathsHottrue,//Hot module replacement. Depends on HotmodulereplacementpluginHttpsfalse,//True for self-signed, object for Cert AuthorityNoinfo:true,//Only errors & warns in hot reload    // ...}, Plugins: [// ...],//List of additional plugins  /* Advanced Configuration (click to show) */}

Based on Vue official Scaffolding tutorial: Others Blog

http://donglegend.com/2016/08/25/webpack%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF04/#

Webpack Summary (Write a beginning to think or not write the official website and other people's blog address)