ASP. NET Core MVC + webpack notes

Webpack is a packaging tool, and will it be necessary to use ASP. MVC itself has bundler~ if used webpack will know that the results of packaging is not the same, MVC packaging is to put all the code together, and a project can only have a package, where enough?

Packaging The main purpose of reducing the number of multi-page application question server, the previous page can access the server more than 20 dozen (excluding pictures), now CSS + script is only 4, through the cache, the other pages only 2 access. Webpack also has hash management for CSS and script, which solves the problem of customer browser caching.

Start with the first step, take care of Package.json first

{  "name": "Webpack",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",    "Start": "Webpack--env production",    "Build": "Webp Ack-dev-server--env Development "  },  " keywords ": [],  " author ":", "  License": "ISC",  " Devdependencies ": {    " babili-webpack-plugin ":" ^0.1.2 ",    " Css-loader ":" ^0.28.7 ",    " Extract-text-webpack-plugin ":" ^3.0.1 ",    " Html-webpack-inline-source-plugin ":" 0.0.9 ",    " Html-webpack-plugin ":" ^2.30.1 ",    " Inline-resource-plugin ":" ^0.6.3 ",    " Sass-loader ":" ^6.0.6 ",    " Style-loader ":" ^0.18.2 ",    " Url-loader ":" ^0.6.2 ",    " Webpack ":" ^3.6.0 ",    " Webpack-dev-server ":" ^ 2.9.1 "  },  " dependencies ": {    " bootstrap ":" ^4.0.0-alpha.6 ",    " jquery ":" 2.2.0 "  }}

NPM install  then prepare webpack.config.js

Const PATH = require (' path '); const Htmlwebpackplugin = require (' Html-webpack-plugin '); const Extracttextplugin = require (' Extract-text-webpack-plugin '); const Babiliplugin = require (' Babili-webpack-plugin '); const Webpack = require (' Webpack '); const Htmlwebpackinlinesourceplugin = require (' Html-webpack-inline-source-plugin '); const Extracttextplugin = new Extracttextplugin ({filename: ' [name].[ Contenthash].css ',//After wrapping the CSS requires hash ignoreorder:true}); module.exports = {devserver: {//This doesn't work, it's the setting at development, I'm generally direct pro Duction Host:process.env.host, port:4200, overlay: {errors:true,//Warning S:true}}, watch:true,//when changing the code, will automatically update, in addition to the Config devtool: ' source-map ',//In the case of a bug, you can see the source entry: {//This is a        Object, which declares what to package, requires a key (also the final packaging location) ' content/shared ': Path.join (__dirname, ' web/shared/index '),//need to declare to package the corresponding Index.js ' Content/home ': Path.join (__dirname, ' Web/home/index '),//amp ' Content/homeamp ': Path.join (__dirname, ' Web/home/amp/index '), output: {//Output location Publicpath: "/", Path:path.resolve (__dirname, ' wwwroot '), The documents that MVC can eventually invoke are placed in wwwrooot filename: ' [name]. [Hash].js '//hash Management js}, module: {//different documents require different loader processor rules: [{test:/\.css$/,                         Main CSS exclude:/node_modules/, Use:extractTextPlugin.extract ({use: {                            Loader: ' Css-loader ', options: {modules:true, Minimize:true | | {/* Cssnano Options */}//To minimize}}, fallback: ' Style-lo Ader '}}, {test:/\.scss$/,//If it doesn't work, take it off use:extract Textplugin.extract ({fallback: ' Style-loader ',//resolve-url-loader may be chained B                   Efore Sass-loader If necessary Use: [//Run SASS loader again run CSS loader {loader: ' Css-loader ',  Options: {modules:true, minimize:true | |                        {/* Cssnano Options */}} }, ' Sass-loader '})}, {test:/\. (        PNG|WOFF|WOFF2|EOT|TTF|SVG) $/, loader: ' url-loader?limit=100000 '}//In the document will appear other documents, need to declare processing]}, plugins: [ New Webpack. Provideplugin ({//Global, as long as the Package.json has, you can directly call the full audience, then why not directly import it? Because not every JS is compliant with the Webpack spec $: "jquery", jquery: "jquery"}), new Htmlwebpackplugin ({//processing HTM L Inject:false,//false is not processing the placement, the result is to put the CSS and script in the specified location template: ' web/shared/template.cshtml ',//Need a Template to do the real HTML filename: '. /web/shared/_layout.cshtml ',//True HTML chunks: [' content/shared ']//output location}), New HtMlwebpackplugin ({inject:false, Template: ' web/home/template.cshtml ', filename: '.            /web/home/index.cshtml ', chunks: [' Content/home ']}),//amp new Htmlwebpackplugin ({ Inject: "Head",//Put CSS and script in head Template: ' web/home/amp/template.cshtml ', filename: '. /web/home/amp/index.cshtml ', chunks: [' content/homeamp '], Inlinesource: '. (CSS) $ ',//package CSS into a line, put it directly in HTML}), new Htmlwebpackinlinesourceplugin (), Extracttextplugin, new Babiliplugin (), new Webpack.optimize.CommonsChunkPlugin ({name: [' content/shared '}}//optimized, due to repeated use of a C on the same page SS and script, this will filter out
)]}

And then the index.js.

Import '.. /.. /node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss '; Import './index.scss '; Import '. /.. /node_modules/bootstrap-sass/assets/javascripts/bootstrap.js ';

Then the layout template.

<! DOCTYPE html>

And then the home template.

@section css{<% for (var Css in htmlWebpackPlugin.files.css) {%><link href= "<%=htmlwebpackplugin.files.css [CSS]%> "rel=" stylesheet "><%}%>} @section scripts{    <% for (var chunk in HtmlWebpackPlugin.files.chunks) {%><script src= "<%= htmlwebpackplugin.files.chunks[chunk].entry%>" ></script><%}%>}

This is the document structure

The results of content in Wwwroot can be obtained through NPM start,

So how does webpack deal with the whole process?

Find the location to be packaged by entry, and find the corresponding index.js by locating index

Index.js, through import and other CSS and script connected together (Webpack is the import concept, the import script needs to have Comand JS specification, presumably)

With the plugin setting, the CSS and script are placed in the corresponding position by the template, and then the real HTML is converted.

　　

ASP. NET Core MVC + Webpack notes