我开发的前端项目用的是webpack+vue,打包的时候把代码打包到'www'
文件夹下
文件结构如下:
我用的webpack配置是之前的领导配置的,平时都没问题,一直没注意,这次项目要求改打包后的目录,要求把css,图片,字体图标,js等等全打包到static文件夹下,如图
这里修改下webpack里面的output路径即可,于是我做出以下改动
这里修改js的路径
output: {
path: resolve('../www'),
chunkFilename: 'static/js/[name].[chunkhash:8].js',
filename: 'static/js/[name].[chunkhash:8].js'
},
这里修改图片字体等路径
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
outputPath: "static/images/",
limit: 10000,
name: "[name].[hash:8].[ext]"
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
outputPath: "static/fonts/",
limit: 10000,
name: "[name].[hash:8].[ext]"
}
}, {
test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
outputPath: "static/media/",
limit: 10000,
name: "[name].[hash:8].[ext]"
}
}
重点来了…我用的extract-text-webpack-plugin
来提取css成单独的文件,配置如下:
new ExtractTextPlugin({
filename:"static/css/[name].[chunkhash:8].css"
}),
到这里,所有样式,图标,字体,全部打包到static路径下了
但是运行后报错,所有的图标,图片都找不到
根据控制台显示,路径里面多了一个static,这个问题让人百思不得其解,经过查资料,原来是extract-text-webpack-plugin
这个插件的问题,这个插件能抽取css成独立的css文件,摆脱了js引入css的麻烦,但是
由于我们是将样式文件单独打包,所以图片的引用是相对于css文件的。因此要修改url-loader的参数,需要修改publicPath
我之前设置的publicPath是"…/",去外层的目录,根据我打包后文件目录结构,仔细想想,css文件在static/css目录下,外层是static目录,所以出现了多了一个static的现象,
于是我把publicPath改为了"../../"
,终于解决了这个困扰我许久的问题