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
asp.net Core MVC + webpack 笔记的更多相关文章
- ASP.NET Core MVC学习笔记
最近由于疫情紧张,遂在家办公,在领导的带领下,学习了一下.Net Core MVC. 一,构建web应用 1.选择c#-所有平台-web 找到ASP.NET Core web应用程序 2.项目命名之 ...
- asp.net core mvc视频A:笔记1.基本概念介绍
此笔记来自视频教程 MVC本身与三层架构没有联系 使用VS2017新建一个默认的asp.net core mvc网站,认识结构及文件用途.
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
- ASP.NET Core 入门笔记8,ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- ASP.NET Core MVC 网站学习笔记
ASP.NET Core MVC 网站学习笔记 魏刘宏 2020 年 2 月 17 日 最近因为” 新冠” 疫情在家办公,学习了 ASP.NET Core MVC 网站的一些知识,记录如下. 一.新建 ...
- asp.net Core MVC + form validation + ajax form 笔记
asp.net Core MVC 有特别处理form,controller可以自己处理model的验证,最大的优势是写form时可以少写代码 先了解tag helper ,这东西就是element上的 ...
- ASP.NET Core 2 学习笔记(六)MVC
ASP.NET Core MVC跟ASP.NET MVC观念是一致的,使用上也没有什么太大的变化.之前的ASP.NET MVC把MVC及Web API的套件分开,但在ASP.NET Core中MVC及 ...
- ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core 入门笔记6,ASP.NET Core MVC 视图传值入门
摘抄自:https://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-view-renderdata.html 如有侵权请告知 一.前言 1.本教 ...
随机推荐
- VUE路由去除#问题
最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看.为了解决此问题,大家一般都会想到:mode: 'history'.可是在开发阶段没有问题,但是一旦build打包后, ...
- 【GISER && Painter】矢量切片(Vector tile)
说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...
- windows中xcopy命令详解
一.格式: 二.举例说明: 1.复制文件,文件路径有空格的,那么就使用双引号括起来.如果目标路径已经有相同文件了,使用覆盖方式而不进行提示.在复制文件的同时也复制空目录或子目录 xcopy ...
- 《User Modeling with Neural Network for Review Rating Prediction》评论打分预测
摘要: 传统的评分预测只考虑到了文本信息,没有考虑到用户的信息,因为同一个词 在不同的用户表达中是不一样的.同样good 一词, 有人觉得5分是good 有人觉得4分是good.但是传统的文本向量表达 ...
- uva11107 后缀数组
题意给了n个串 然后计算 这些串中的子串在大于1/2的串中出现 求出这个串的最长长度. 将这些串用一个每出现的不同的字符拼起来 ,然后二分找lcp #include <iostream> ...
- 20154312 曾林 ExpFinal CTF Writeup
0.写在前面 1.不合理的验证方式 2.加密与解密的对抗 3.一个SQL引发的血案 4.管理员的诟病 5.备份信息的泄露 6.svn信息泄露 7.coding 8.平衡权限的威胁 9.文件上传的突破 ...
- Java设计模式应用——桥接模式
性能管理系统中,数据产生后需要经过采集,汇聚,入库三个流程,用户才能查询使用. 采集可以是snmp采集,也可以是ems采集:汇聚可以使storm汇聚,也可以是spark汇聚:入库可以是hdfs入库,也 ...
- linux 判断文件最后更新时间 实现监控日志是否有输出功能
linux 判断文件最后更新时间 实现监控日志是否有输出功能. 需求:监控log.txt日志文件,超过一分钟没输出内容就认为是停了,则自动启动程序. 用stat 可以看文件的更新时间stat -c % ...
- LabVIEW如何方便地调用DLL文件
转自:http://bbs.elecfans.com/jishu_469502_1_1.html LabVIEW调用DLL文件 LabVIEW支持通过调用DLL文件的方式与其它编程语言混合使用.比 ...
- .Family_物联网
群名称 : .Family_物联网 QQ群号: 群介绍 基于嵌入式,构建各通信模式,网关,平台软件,工业系统等领域,欢迎各位朋友加群,交流学习!