javascript - webpack-- css为什么不能单独打包出来？
本文介绍了javascript - webpack-- css为什么不能单独打包出来？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: {
app: './src/app.js',
vendor: ['jquery']
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js"
},
module: {
loaders: [
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
]
},
plugins: [
new ExtractTextPlugin("[name].css"),
new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js',{
allChunks: true
}),
new webpack.ProvidePlugin({
$: 'jquery'
}),
]
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="stylesheet" type="text/css" href="/app.css">
</head>
<body>
</body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="/vendor.js"></script>
<script src="/app.js"></script>
</html>
目录：
解决方案
你的app.js或者content.js中要有如下代码才会打包出来
import './style.scss';//ES6
require './style/scss';//ES5没有这些代码的话，webpack不知道你在哪里引入了scss，当然也就谈不上打包出来了。
这篇关于javascript - webpack-- css为什么不能单独打包出来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
