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
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于