webpack 加载器 - 打包处理 css 文件

webpack 加载器-打包处理 css 文件

1. 创建 src\css\1.css 文件

li {
  list-style: none;
}
​

2. 在 index.js 中引入 1.css 文件

import "./css/1.css"
​

3. 自动打包的时候提示了错误

提示缺少一个合适的 loader 来处理 .css 文件

4. 安装 loader

npm i -D style-loader css-loader
​

5. 解决文件 修改 webpack 配置文件

const path = require("path") // 导入 node.js 中专门操作路径的模块
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlWebpackPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
  // mode 用来指定构建模式
  mode: "development", // development production
  entry: path.join(__dirname, "./src/index.js"), // 打包入口文件的路径
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件的存放路径
    filename: "bundle.js" // 输出文件的名称
  },
  plugins: [
    htmlWebpackPlugin
  ],
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  }
}
​

6. 因为修改了配置文件 所以重新运行

npm run dev
​