1、 style-loader
- 作用
style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。
- 安装style-loader
npm install style-loader --save-dev
、css-loader
- 作用
css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。
- 安装css-loader
npm install css-loader --save-dev
创建webpack.config.js，并编写打包脚本
// 引入node的path模块
var path = require('path');
module.exports = {
entry: {
app: "./src/app.js" // 要打包的入口文件
},
output: {
path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录
filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
},
module: {
rules: [ // 定义css规则
{
test: /\.css$/, // 正则匹配要识别的css
use: [
{
loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
},
{
loader: 'css-loader' // 使用css-loader进行处理
}
]
//use:['style-loader','css-loader'] // 此处也可以这样写
}
]
}
}