asp.net Core MVC + webpack 笔记
webpack 是一个打包工具，用在asp.net Core MVC 会觉得有必要吗？ MVC 本身就有bundler~ 如果用过webpack就会知道，打包出来的效果结果就是不一样，MVC的打包就是把所有的代码放在一起，而且一个项目就只可以有一个打包，那里够用？
打包主要目的减少多页面应用反问服务器的次数，以前一个页面可以访问服务器多打20多个（不包括图片），现在css + script 就只有4个，通过缓存，其他页面就只有2个访问。webpack 还对css 和 script 有hash 管理，这解决了顾客游览器缓存问题。
开始第一步，先搞定package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --env production",
"build": "webpack-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 后再准备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',//打包后的css 需要hash ignoreOrder: true }); module.exports = { devServer: { //这没什么用到，就是在开发时的设定，我一般都是直接production host: process.env.host, port: 4200, overlay: { errors: true, // warnings : true } }, watch: true,//当改变代码时，会自动更新，除了config devtool: 'source-map',//在有bug时，可以看到源码 entry: { //这是个对象，是声明要打包什么，需要一个key（也是最终打包的位置） 'content/shared': path.join(__dirname, 'Web/Shared/Index'),//需要声明要打包对应的Index.js 'content/home': path.join(__dirname, 'Web/Home/Index'), //amp 'content/homeAmp': path.join(__dirname, 'Web/Home/Amp/Index') }, output: { //输出位置 publicPath: "/", path: path.resolve(__dirname, 'wwwroot'),//MVC 最终可以调用的文档都放在wwwrooot filename: '[name].[hash].js'//hash 管理js }, module: { //不同的文档需要不同的loader处理器 rules: [ { test: /\.css$/,//主要的css exclude: /node_modules/, use: extractTextPlugin.extract({ use: { loader: 'css-loader', options: { modules: true, minimize: true || {/* CSSNano Options */ } //要minimize } }, fallback: 'style-loader' }) }, { test: /\.scss$/, //如果没用到就拿掉吧 use: ExtractTextPlugin.extract({ fallback: 'style-loader', //resolve-url-loader may be chained before sass-loader if necessary use: [ //先跑sass loader 再跑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' } //在文档中会出现其他文档，需要声明处理 ] }, plugins: [ new webpack.ProvidePlugin({ //全局，只要package.json 有，就能直接全场调用，那么为什么不直接import呢？因为不是每个js都符合webpack规范 $: "jquery", jQuery: "jquery" }), new HtmlWebpackPlugin({ //处理html inject: false,//false 是不处理置入，结果是把css 和 script 放在指定的位置 template: 'Web/Shared/Template.cshtml',//需要一个模版来做正真的html filename: '../Web/Shared/_Layout.cshtml',//正真的html chunks: ['content/shared']//输出位置 }), new HtmlWebpackPlugin({ inject: false, template: 'Web/Home/Template.cshtml', filename: '../Web/Home/Index.cshtml', chunks: ['content/home'] }), //amp new HtmlWebpackPlugin({ inject: "head",//把css 和 script 放在head里 template: 'Web/Home/Amp/Template.cshtml', filename: '../Web/Home/Amp/Index.cshtml', chunks: ['content/homeAmp'], inlineSource: '.(css)$',//把css打包成一行，直接放在html里 }), new HtmlWebpackInlineSourcePlugin(), extractTextPlugin, new BabiliPlugin(), new webpack.optimize.CommonsChunkPlugin( { name: ['content/shared'] } //优化，由于同个页面重复使用某个css 和 script，这里会过滤掉
) ] }
接着是index.js
import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import './Index.scss';
import '../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js';
接着是layout template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Project</title>
<% for (var css in htmlWebpackPlugin.files.css) { %><link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"><% } %> //inject css 位置
@RenderSection("Css", required: false)
</head>
<body>
@RenderBody()
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %> //inject script 位置
@RenderSection("Scripts", required: false)
</body>
</html>
接着是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><% } %>
}
<h1>home</h1>
这是文档结构
通过npm start就可以得到wwwroot里content的结果，
那么webpack是怎么处理整个过程的呢？
通过entry找到要打包的位置，找到index就能找到对应的index.js
index.js 中，通过import和其他css 和 script 连接在一起（webpack是import 概念，被import的script 需要有comand js的规范，大概是这样）
通过plugin的设置，会通过模版把css和script放在对应的位置，然后转换去正真的html
