webpack4.1-loader之css

webpack4.1-loader之css

---

一、为什么要用loader？

因为webpack的js文件中默认只能打包加载js模块，例import $ from ‘jquery’，而不能加载css等其他文件
所以需要loader工具帮助我们在js文件中打包加载css文件

二、打包加载css文件的loader是哪几个？

style-loader 和 css-loader

三、步骤

1. npm初始化，安装webpack webpack-cli webpack-dev-server

   npm init -y
   npm i webpack webpack-cli webpack-dev-server --save-dev
   

2. 拉取jquery

   npm i jquery -d
   

3. 安装style-loader和css-loader

   npm i style-loader css-loader -d
   

4. 在package.json中添加

   "dev": "webpack-dev-server"
   

   

5. 编写配置文件webpack.config.js

   const path = require('path')
   const webpack = require('webpack')
   module.exports = {
       entry: path.join(__dirname, './src/js/index.js'),
       output: {
           path: path.join(__dirname, './dist'),
           filename: "index.js"
       },
       mode: "development",
       devServer: {
           open: true,
           port: 3000,
           contentBase: 'src',
           hot: true
       },
       plugins: [
           new webpack.HotModuleReplacementPlugin()
       ]
   }
   

   

6. 编写css文件

   li{
       list-style: none;
   }
   

   

7. 编写js文件

   import $ from 'jquery'
   // 导入css文件
   import "../css/index.css"
   $(function () {
       $("li:odd").css("color", "pink")
       $("li:even").css("color", "skyblue")
   })
   

   

8. 在配置文件webpack.config.js中添加

   module: {
       rules: [
           {test: /\.css$/, use: ['style-loader', 'css-loader']}
       ]
   }
   

   

9. 运行

   npm run dev
   

   

四、其他的样式文件的loader

1. less

style-loader、css-loader、less-loader
注意：less-loader依赖于less

2. sass、scss

style-loader、css-loader、sass-loader
注意：sass-loader依赖于node-sass

---

更新时间：2020-1-2