之前学习了 babel & babel-polyfill .
前者又来解决 ES6 -> ES5 语法的转化.
后者用来解决 ES6中一些API在老版本浏览器无法执行的问题.
这一次来学习使用 css-loader.
搭建好 bebel & babel-runtime 环境
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'app/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude:/node_moudles/
}
]
}
}
"build":"webpack --config webpack.config.js"
先尝试build一次.
image.png
成功,webpack.config.js 配置没有问题.安装的依赖插件也正常工作.
在webpack打包输出文件夹有一个html文件..
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html</title>
</head>
<body>
<p>看样式在哪里!!!!</p>
<script src="bundle.js"></script>
</body>
</html>
尝试使用 .css 文件设置 p 元素的样式.
新建一个 index.css 并输入以下代码.
p{
text-align: center;
font-size: 30px;
color: red;
text-decoration: underline;
}
如何把 .css 的文件和 .html 文件联系起来呢?
.html文件中我们导入的 bundle.js.
这个 bunlde.js 是 webpack 打包生成的.
我们在webpack 打包路径所有文件链路里,随便选择一个文件,在里面键入 import .css 文件,应该可以的.
因为它会把所有依赖项,都打包进 bundle.js 文件.
我选择在 index.js 文件(也就是 webpack 的入口文件中).键入 import './assets/styles/index.css'
image.png
然后执行 npm run build
image.png
发现出错了.
说明:
- webpack 在打包文件的时候,发现了
.css后缀名的文件. -
webpack本身只认识.js .json文件,这个.css文件,它不知道该怎么处理. - 于是就从配置文件中,是否有
moudle.ruls[x].test=/\.css$/的配置. - 发现没有,于是就报错
You may need an appropriate loader to handle this file type
安装 css-loader
npm i --save-dev css-loader@0
注意,这里安装 css-loader@0的版本
配置 webpack.config.js
{
test: /\.css$/,
use: 'css-loader'
}
运行 npm run build
image.png
编译成功.
打开 bundle.js 文件.
image.png
发现 css 的代码确实是写进了 bundle.js 文件中.
又因为 index.html 中是引用了 bunlde.js 文件的.不出意外,index.html 中的 p 元素应该样式已经生效.
发现css代码确实写进了js文件中. 但页面样式并没有生效....
image.png
当然,我看过了很多 webpack.config.js 的配置.说是还要加一个 style-loader..
于是接着安装 style-loader
npm i --save-dev style-loader
修改配置文件
test: /\.css$/,
use: ['style-loader','css-loader']
运行 npm run build
image.png
打开 index.html
image.png
css-loader 仅仅只是把样式代码写入 js.但只有这一步还不够.
还需要借助 style-loader 把写入js的样式代码插入到 index.html文件中.
image.png
-
css-loader,可以处理import .css的问价.并将css代码写入bundle.js文件中. - 但仅仅只有上一步,样式代码还是无法设置到上去.
- 还需要借助
style-loader将css-loader获取到的代码 转交给style-loader.让style-loader将css插入到页面的html.head.style标签中去. - 但中间的实际过程:
- 是
css-loader把css写入js,然后style-loader在去处理这些js css. - 还是
css-loader把数据直接传递给了style-loader,然后style-loader直接写入文件? - 我个人倾向后面这一种.
- 是
- 有些资源是打包进
bundle.js中的,有的资源打进去不行,必须借助一个loader写入到html中.
网友评论