asp.net Core MVC + webpack 筆記
阿新 • • 發佈：2017-10-11
jquer 筆記 section ima shtml strong 開發 onf images
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
asp.net Core MVC + webpack 筆記