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
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 127 回帖 • 353 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...