loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
现在我们来演示一下如何用 loader 来处理 CSS 文件。
先准备好内容。
src/app.css
body { background: pink;
}
src/app.js
import css from './app.css';
console.log("hello world");
如果你现在运行 webpack 命令，会提示错误
意思就是说，默认情况下，webpack 处理不了 CSS 的东西。
我们来处理这个问题。
$ npm install --save-dev css-loader style-loader
webpack.config.js：
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
再执行webpack，就会把css打包进js文件了
如果不希望把css打包到js文件里，可以使用extract-text-webpack-plugin插件把css打包到指定的css文件中
npm install --save-dev extract-text-webpack-plugin
旧版本已经不支持webpack4了，所以要使用以下命令：
npm install extract-text-webpack-plugin@next
webpack.config.js：
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:'./src/app.js',
output:{
filename:'app.bundle.js'
},
plugins: [
new HtmlWebpackPlugin(
{
minify:{
collapseWhitespace: false,
},
hash: true
}
),
new ExtractTextPlugin({
filename: 'css/[name].css' //路径以及命名
})
],
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
exclude: /node_modules/,
}
]
}
}
生成的html类似于：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width,initial-scale=1"><link href="css/main.css?5300da63334cc72d7813" rel="stylesheet"></head>
<body>
<script src="app.bundle.js?5300da63334cc72d7813"></script></body>
</html>
在dist/css下面会生成main.css
网友评论