add HtmlWebpackPlugin

This commit is contained in:
huixisheng 2017-03-01 13:56:01 +08:00
parent 1f561319f3
commit 5af94c5295
3 changed files with 15 additions and 6 deletions

View file

@ -5,6 +5,7 @@
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口
@ -15,7 +16,7 @@ module.exports = {
// 输出
output: {
path: path.join(__dirname, '../test/dist'),
publicPath: '/test/dist/',
publicPath: '',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
@ -99,8 +100,15 @@ module.exports = {
}
},
plugins: [
new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }), // 提取CSS
// new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
// new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }), // 提取CSS
// https://doc.webpack-china.org/plugins/commons-chunk-plugin/
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.js' })
new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }),
new HtmlWebpackPlugin({
inject: true,
filename: path.join(__dirname, '../test/dist/index.html'),
template: path.join(__dirname, '../test/index.html') // 模版文件
})
// new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), // 提取第三方库
]
};

View file

@ -65,6 +65,7 @@
"gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",

View file

@ -3,11 +3,11 @@
<head>
<meta charset="UTF-8">
<title>iView test page</title>
<link href="/test/dist/main.css" rel="stylesheet">
<!-- <link href="/test/dist/main.css" rel="stylesheet"> -->
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/test/dist/vendors.js"></script>
<script type="text/javascript" src="/test/dist/main.js"></script>
<!-- <script type="text/javascript" src="/test/dist/vendor.js"></script>
<script type="text/javascript" src="/test/dist/main.js"></script> -->
</body>
</html>