虽然现在有很多单页应用,不过还是多页面用的比较多一些,先研究了下多入口的配置
console.log('123');
之前的webpack.config.js的配置是这样的
entry: __dirname + "/index.js",
output:{
path: __dirname,
filename: 'bundle.js'
}
需要修改一下他的结构
entry: {
index: __dirname + "/index.js",
entry: __dirname + '/entry.js'
},
output: {
filename: 'js/[name].js',
path: __dirname + '/public'
},
//顺便把他的img loader的地址就改下,删除name后面的build,因为output里面写了path,后面都会继承
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=img/[name].[hash:8].[ext]"
}
然后npm run build会出现下面的结构,生成了一个public的文件夹里面的生成了对应的文件,这样以后js在webpack里面注册一下之后就会生成到public里面,修改下index.html的script路径就能使用了
![这里写图片描述](https://img-blog.csdn.net/20170716220025668?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjAzMzQyOTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
之前的话研究了下loader感觉还是挺方便的,跟印象中的gulp好像简单一些,这回研究下plugin的相关组件
plugin
html-webpack-plugin
首先还是安装下包,npm install html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
hash: true,
chunks: ['index','entry']
})
]
这一个html-webpack-plugin的配置还是相对比较简单的
不过当分页面非常多的时候,每一个页面写一个这个就非常的麻烦了
webpack.config.js的配置还是相当灵活的可以这样修改下
//webpack.config.js
//删除plugins里面的htmlwebpack
// new HtmlWebpackPlugin({
// filename: 'index.html', // 生成出来的文件和路径,前面会加上output的path
// template: 'index.html', // 获取最初的html末班
// inject: 'body', // 插入文件的位置
// hash: true, // 在生成的文件后面增加一个hash,防止缓存
// // "chunks": { // 引入的js和css地址
// // "head": {
// // "entry": ["./js/index.js","./js/entry.js"] // 所需插入的js,数量超过一个用数组
// // },
// // xhtml:false
// // }
// chunks: ['index','entry']
// }),
// 在文件的最下面加上一个数组遍历,将想生成HtmlWebpackPlugin的js写在数组里生成,一些特定的页面引入多js的也可以自己定制,注意层次结构,就可以随心所欲的修改了
const htmlArray = ['index'];
htmlArray.forEach((element) => {
const chunksArray = [element];
if (element === 'index') {
chunksArray.push('entry');
}
const newPlugin = new HtmlWebpackPlugin({
filename: element + '.html',
template: element + '.html', // 获取最初的html末班
inject: 'body', // 插入文件的位置
hash: true, // 在生成的文件后面增加一个hash,防止缓存
chunks: chunksArray
});
module.exports.plugins.push(newPlugin);
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
![这里写图片描述](https://img-blog.csdn.net/20170718092442030?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjAzMzQyOTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
index.html将里面的script标签删掉!!!
,不然会运行一次就会网上加一次,使用npm run webpack之后可以看到在public里面生成了一个index.html,并且在body处加上了两个script
还有下列属性可以使用
title: 设置title的名字
inject: 把模板注入到哪个标签后,
favicon: 给html添加一个favicon(就是浏览器标签上的小图片),
minify:是否压缩 如果要写的话用minify: { removeAttributeQuotes: true }不然会报错
hash:是否hash化 true false ,
cache:是否缓存,
showErrors:是否显示错误,
xhtml:是否自动毕业标签 默认false
extract-text-webpack-plugin
安装包 npm install extract-text-webpack-plugin –save-dev
const ExtractTextPlugin = require("extract-text-webpack-plugin");
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader?limit=8192&name=../img/[name].[hash:8].[ext]"
}
new ExtractTextPlugin({
filename: 'css/[name].css'
}),
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
![这里写图片描述](https://img-blog.csdn.net/20170717223642919?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjAzMzQyOTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
报错了,那是因为module和plugin是在同一级的,而不是module里面的属性
![这里写图片描述](https://img-blog.csdn.net/20170717235516681?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjAzMzQyOTU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
转载自:http://blog.csdn.net/qq_20334295/article/details/75212964