webpack 学习笔记之四 , css-loader

之前学习了 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中.