注意：
本文假设你有webpack 的基础认识。
webpack打包css的两种处理方式：
- 将css打包进入javascript代码中。然后在js代码加载完成后，创建style标签，将css插入其中。
- 将所有css模块打包成一个css文件，然后在index.html中使用link标签引用这个css文件。
下面开始演示第一种css打包方式
项目结构如下所示：
1.jpg
开始实战
创建一个目录<code>webpack-demo1</code>,并安装<code>wbepack.</code>
mkdir webpack-demo1 && cd webpack-demo1
npm init -y
npm install --save-dev webpack
安装<code>bootstrap</code>
npm install bootstrap --save
安装<code>css-loader</code>,<code>style-loader</code>,<code>file-loader</code>和<code>url-loader</code>
npm install css-loader style-loader file-loader url-loader --save-dev
在项目根目录下，新建<code>index.html</code>文件
<body>
<h1>代码分割--css</h1>
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<script src="./dist/bundle.js"></script>
</body>
script标签中的<code>bundle.js</code> 是我们打包后生成的文件。
新建<code>index.css</code>文件
h1 {
color: red;
}
新建<code>index.js</code>文件
// 像 JavaScript 模块一样引入 CSS 文件
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
console.log('Hello World');
新建<code>webpack.config.js</code>文件
const path = require('path');
module.exports = {
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[{
test:/\.css$/,
use:['style-loader','css-loader']
},{
test:/\.(svg|woff|woff2|eot|ttf)$/,
use:['url-loader']
}]
}
}
因为bootstrap.css中引用了一些字体文件，所以需要使用url-loader。否则打包会出错。
最后像下面这样执行命令：
webpack --config webpack.config.js
输出结果：
51498112205_.pic.jpg
此时你可以在浏览器中打开index.html,然后打开控制台，就能看到html中，多出了俩个style标签。一个包含了bootstrap.css代码，另一个包含了index.css代码。
这种打包方式的缺点是：
你无法使用浏览器的能力，去异步且并行去加载 CSS。取而代之的是，你的页面需要等待整个 JavaScript 文件加载完，才能进行样式渲染。
第二种打包方式
先安装<code>ExtractTextWebpackPlugin</code>
install --save-dev extract-text-webpack-plugin
为了使用这个插件，它需要通过三步被配置到 <code>webpack.config.js </code>文件中。
修改<code>webpack.config.js</code>
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({use: 'css-loader'})
}, {
test: /\.(svg|woff|woff2|eot|ttf)$/,
use: ['url-loader']
}
]
},
plugins: [new ExtractTextPlugin('styles.css')]
}
这个插件会将所有入口的chun中引用的.css文件，放到一个单独的css文件中。这行代码 new ExtractTextPlugin('styles.css')将提取出来的css，放到了styles.css文件中。
ExtractTextPlugin.extract({use: 'css-loader'})方法会从一个已存在的 loader 中，创建一个提取(extract) loader。
最后你还需要在index.html中引用styles.css文件。
<link rel="stylesheet" href="./dist/styles.css">
再次打包，你会发现在dist中多了一个style.css文件。
在浏览器中打开index.html。注意：h1标签的样式被bootstrap.css覆盖了，因此没有字体显示红色。
网友评论