css打包怎么回事

html-css014

css打包怎么回事,第1张

老同事,刘明告诉你,呵呵

你说的打包,很简单,就是把网页代码 <head></head>之间的CSS样式代码 ,拿出来 ,放在一个 .css 文件中,然后在 HEAD 中,用<link href="文件名.css" rel="text/css" />

你可以在网页中,打开看一下网站的源代码,就明白了

简单记录下如何使用。

首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,Bundle应该已经自动配置上了,因为本身会有jQuery和jQuery UI的引用,这两项引用会用到Bundle。

就简单说一下要点吧。

首先在项目的App_Start文件夹中,会有一个BundleConfig.cs文件:

其实有两种方案:第一种是将 css 文件在 js entry 中添加依赖;第二种直接设置 css entry。

第一种方案

// index.jsimport 'normalize.css'

...

// webpack config{ entry: {index: './index.js'

},

...

}

// outputindex.jsindex.css

这种是 Webpack 官方推荐的方案,但是每次都要把 css 放到 js entry 中才可以 extract 出来。

第二种方案(直接设置 css entry)

默认 Webpack 设置 css entry 除了 extract 出 css 文件还会多产生一个 js 文件,其实可以写个 Webpack 插件将其删除就可以了。