从html中分离css,webpack实战1之css分离

注意：

本文假设你有webpack 的基础认识。

webpack打包css的两种处理方式：

将css打包进入javascript代码中。然后在js代码加载完成后，创建style标签，将css插入其中。

将所有css模块打包成一个css文件，然后在index.html中使用link标签引用这个css文件。

下面开始演示第一种css打包方式

项目结构如下所示：

1.jpg

开始实战

创建一个目录webpack-demo1,并安装wbepack.

mkdir webpack-demo1 && cd webpack-demo1

npm init -y

npm install --save-dev webpack

安装bootstrap

npm install bootstrap --save

安装css-loader,style-loader,file-loader和url-loader

npm install css-loader style-loader file-loader url-loader --save-dev

在项目根目录下，新建index.html文件

代码分割--css

• «

• 1
• 2
• 3
• 4
• 5

• »

script标签中的bundle.js 是我们打包后生成的文件。

新建index.css文件

h1 {

color: red;

}

新建index.js文件

// 像 JavaScript 模块一样引入 CSS 文件

import 'bootstrap/dist/css/bootstrap.css';

import './index.css';

console.log('Hello World');

新建webpack.config.js文件

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 文件加载完，才能进行样式渲染。

第二种打包方式

先安装ExtractTextWebpackPlugin

install --save-dev extract-text-webpack-plugin

为了使用这个插件，它需要通过三步被配置到 webpack.config.js 文件中。

修改webpack.config.js

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文件。

再次打包，你会发现在dist中多了一个style.css文件。

在浏览器中打开index.html。注意：h1标签的样式被bootstrap.css覆盖了，因此没有字体显示红色。