Webpack used in aps.net MVC

Pre-play Random kan:

As a result of a JS engine to be promoted, so that JS can be removed from the browser, in a good local execution, so Nodejs appeared. JS can develop local applications, the development of this application that has a lot of JS files, the total must be divided into modules to manage it, the module after the division, how to introduce between modules? Using can be used in Java in import,c#. Well, JS application in the Require ("Path/to/module") bar, always should be set a standard bar, so this JS introduction method is defined in order to COMMONJS. Later someone was inspired to use such a specification in the Web app, since it could be referenced in a local app. So require ("Path/to/module", function () {}) This kind of Web JS introduction method can be applied, the name of the AMD specification, probably means that the module is loaded well, after the implementation of the method. At the same time, another module load specification cmd is also present. In fact, AMD and the CMD specification are similar, are used for the Web module loader, AMD used the loader is requirejs,cmd use of the loader is Seajs,requirejs foreigners use more, seajs people use more. Then came the Grunt,gulp,webpack packaging tool. Nodejs is what, in fact, he is equivalent to allow JS in the command line execution of the tool. Above disorderly kan over, know not much, wrong place, please correct me.

Body Start

When I was still excited to follow Seajs, even before I started to figure it out, someone had already pronounced Seajs's death sentence. After using SEAJS development for a while, yes, I agree with this view, especially in the packaging of modules, I still do not find a good solution (perhaps I am not enough knowledge). Feel Seajs only to do the decomposition of the module, but did not find a good solution to the integration of the module. Frankly speaking seajs is just a loader, not a packaging tool, it is missing is a packaging tool. Until later saw Webpack, after a preliminary understanding of his function, I am really ecstatic, I feel that this is the front-end building solution I have sought.

Consider our requirements when developing a single-page application:

• 1, we want each view to load only the resources associated with it, the other view to use the resources in the first click on the page to load again, thereby reducing the page resource requests, improve page loading speed;
• 2, the introduction of other plug-ins, we hope that when the first introduction of plug-ins, while the plug-in to the introduction of CSS into the page, such as Art dialog plugin, repeated reference, will not reload;
• 3, Css,image,js compile, compress package, generate version number, automatically replace, and add to HTML or schtml.

Yes, Webpack are able to meet the above requirements. In addition to the above features, it also supports the introduction of a variety of modules natural support COMMONJS, AMD, CMD, but EA6 need to introduce relevant loader.

In other words, in a module, you can use the following definition methods:

Said so much, the last configuration I was using. Automated construction, white play is the configuration Ah, the configuration is once and for all.

My plan is: ASP. NET Mvc+backbone+bootstrap

ASP. NET MVC ... Don't explain it;

Backbone: Single-page application routing, front-end MVC, etc.;

Bootstrap front-end CSS framework.

General idea of the configuration file:

First I wanted the login to be separate from the main application, so I set up two program portals, but both portals needed jquery at the same time, so I extracted jquery separately;

Second, I set up a template for MVC view: views/home/index_tpl.cshtml. Each time you modify the view, you only need to modify the template, the build will generate the target page views/home/index.cshtml, index.cshtml will be automatically added to the various entry files

Index_tpl.cshtml@{viewbag.title = "Background Management-Home";} <! DOCTYPE html>
//after the completion of the Index.cshtml,webpack will insert a variety of import files @{viewbag.title = "Background Management-Home";} <! DOCTYPE html>
Finally, said a small episode, using Webpack to generate the target view, after running to find that Chinese is actually garbled, looking for a long time to find the original is because the Webpack generated file encoding is Utf-8 no BOM (utf-8 without BOM) format, and MVC's. cshtml format is the Utf-8 BOM format. So found the Webpack-utf8-bom this plugin to solve the problem smoothly.
The rest of the information is in the notes.
With the introduction, loading, and packaging of webpack resources, is everything so natural that I can still not like it?
Package.json seems a bit incomplete, not all just press Webpack.config.js to find it.

{"name": "src", "version": "1.0.0", "description": "$", "main": "Webpack.config.js", "dependencies": {"babel-c Ore ":" ^6.17.0 "," Babel-loader ":" ^6.2.5 "," babel-preset-es2015 ":" ^6.16.0 "," Bootstrap ":" ^3.3.7 "," Css-loade R ":" ^0.25.0 "," Expose-loader ":" ^0.7.1 "," Html-webpack-plugin ":" ^2.22.0 "," jquery ":" ^3.1.1 "," Jquery-ui ":"    ^1.12.1 "," loader-utils ":" ^0.2.16 "," Lodash ":" ^4.16.4 "," Style-loader ":" ^0.13.1 "," Wangeditor ":" ^2.1.22 ", "Webpack": "^1.13.2"}, "Devdependencies": {"art-template": "^3.0.3", "Art-template-loader": "^0.1.4", "BAC Kbone ":" ^1.3.3 "," Clean-webpack-plugin ":" ^0.1.13 "," Copy-webpack-plugin ":" ^3.0.1 "," Extract-text-webpack-plugi N ":" ^1.0.1 "," File-loader ":" ^0.9.0 "," Html-webpack-plugin ":" ^2.22.0 "," MIME ":" ^1.3.4 "," underscore ":" ^1.8 .3 "," Url-loader ":" ^0.5.7 "}," scripts ": {" test ":" "}," Author ":" "," License ":" ISC "}
　　
Webpack.config.js

var path = require (' path '), var webpack = require (' Webpack '), var htmlwebpackplugin = require (' Html-webpack-plugin '); Auto Write writes references to Htmlvar Commonschunkplugin = require ("Webpack/lib/optimize/commonschunkplugin"); Extract public module var extracttextplugin = require ("Extract-text-webpack-plugin");//extract/detach Cssvar Cleanwebpackplugin = require (' Clean-webpack-plugin '); Delete file var copywebpackplugin = require (' Copy-webpack-plugin '); Copy file var bomplugin = require (' Webpack-utf8-bom ');//Convert the file to utf-8 BOM format, solve the problem of Chinese garbled//console.log (Require.resolve (" Bootstrap "));//defines the path of some folders var Root_path = Path.resolve (__dirname); var ctrl_root_path = Path.resolve (__dirname," Administration ") var Ctrl_src_path = Path.resolve (Ctrl_root_path, ' dev '); var ctrl_dist_path = Path.resolve (CTRL_ROOT_ PATH, ' Dist ');//console.log (ctrl_root_path) Module.exports = {entry: {index:path.resolve (Ctrl_src_path, ' Index        . js '), Login_index:path.resolve (Ctrl_src_path, ' login_index.js '), Vendors: [' jquery ', ' DatePicker '], //"Jquery-ui ": [" Jquery-ui/themes/base/core.css "," Jquery-ui/themes/base/datepicker.css "," jquery-ui/themes/base/ Theme.css "],//" style ": [Path.resolve (Ctrl_src_path, ' styles/style.css ')],}, output: {//context:pat H.resolve (__dirname, ' scripts '), Path:path.resolve (Ctrl_dist_path), Publicpath: '/administration/dist/',//when The generated resource file and the site are not in the same place when you need to configure the address e.g.: Site in SRC, resource generation to/src/static/dist, then publicpath= "/static/dist" filename: "[name]. [Hash:6].js ", Chunkfilename:" [Id].chunk.js ",}, Plugins: [//new webpack. Provideplugin ({$: ' jquery '}), New Extracttextplugin ("styles/[name].[ Contenthash:6].css ", {allchunks:false}), new Htmlwebpackplugin ({title: ' admin ', Template: Path.resolve (Ctrl_root_path, ' views/home/index_tpl.cshtml '), Filename:path.resolve (Ctrl_root_path, ' views/home /index.cshtml '), chunks: [' index ', ' vendors '],//Configure the module to be added inject: ' body '}), new HTmlwebpackplugin ({title: ' Login admin ', template:path.resolve (Ctrl_root_path, ' Views/account/login_tpl. Cshtml '), Filename:path.resolve (Ctrl_root_path, ' views/account/login.cshtml '), chunks: [' Login_inde X ', ' Vendors '],//Configure the module to be added inject: ' body '}), new Commonschunkplugin (' Vendors ', ' vendors.[ Hash:6].js '), New Cleanwebpackplugin ([' Dist ', ' build '], {root:ctrl_root_path, verbose:true , Dry:false,//exclude: ["Dist/1.chunk.js"]}), New Bomplugin (True,/\. (        cshtml) $/),//Solve cshtml Chinese garbled problem], module: {/*** Solve the problem of dynamic path warning ***///require UNKNOWNCONTEXTREGEXP:/$^/, Unknowncontextcritical:false,//require (expr) Exprcontextregexp:/$^/, EXPRCONTEXTCRITICAL:FA LSE,//require ("prefix" + expr + "Surfix") Wrappedcontextregexp:/$^/, Wrappedcontextcritical:false          ,/***end****/loaders: [  {test:require.resolve (' jquery '), loader: ' Expose?$!expose?jquery '},//To expose jquery to global variables {test:/\.css$/, L Oader:ExtractTextPlugin.extract (' Style-loader ', ' css-loader? ' + json.stringify ({discardcomments: {removeall:true}} )}, {test:/\. (png|jpg|gif|woff|woff2|eot|ttf|svg) (\? [a-z0-9]+] $/, loader: ' url-loader?limit=1000&name=fonts/[name]. [Hash:6]. [ext] '},//Process picture URL//{test:/\. ( Png|jpg|gif) (\?[ a-z0-9]+)? $/, Loader: ' url-loader?limit=1000&name=images/[name]. [Hash:8].                [ext] '},//processing picture URL limit=1000 Less than 1KB generates Base64//{test:/\.css$/, Loader: "Style!css"}, { Test:/\.js$/, exclude:/(node_modules|bower_components)/, loader: ' Babel ',//' Babel             -loader ' is also a valid name to reference query: {presets: [' es2015 ']}     }, {test:/\.tpl/, Loader: ' Art-template-loader '},]}, resolve: {   Alias: {"DatePicker": "Jquery-ui/ui/widgets/datepicker",}}}; 
Resources:
Webpack https://webpack.github.io/docs/
NodeJS https://nodejs.org/
Grunt http://gruntjs.com/
Gulp http://gulpjs.org/
Seajs http://seajs.org/docs/
Requirejs http://requirejs.org/
Webpack used in aps.net MVC