极客观点
项目管理
HarmonyOS
//webpack
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader'
})
}]
},
plugins:[
new ExtractTextPlugin('styles.css'),
]
};//index
<html>
<head>
<title>webpack 2 demo</title>
<link rel="stylesheet" type="text/css" href="dist/styles.css"/>
<style type="text/css">
h1{
background: black;
}
</style>
</head>
<body>
<div class='container'>
<h1>webpack</h1>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>
//package
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"style-loader": "^0.17.0",
"webpack": "^2.4.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}我的配置只能提取import引入的css 不能提取内联的 求大神指点
你的样式写在css里面的才能提取出来，因为你test 就是匹配的css
之余内联样式，是提取不出来的，那个会被test js所匹配打包的