极客观点
项目管理
HarmonyOS
webpack.config.js里的配置文件
var ROOT = utils.fullPath('../');
var config = {
entry: {
main: ["./src/entry/main.js"],
vendor: ["react-dom", "react", "react-router"]
},
output: {
path: ROOT + '/dist',
filename: _DEV_ ? 'js/[name].js' : 'js/[name].[chunkhash:8].js',
//按需加载时，对应生成的文件名
chunkFilename: _DEV_ ? 'js/[name].js' : 'js/[name].[chunkHash:8].js',
publicPath: ''
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
enforce: 'pre',
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
//注意：在配置in-line模式下热加载的时候（具体配置查看webpack-dev-js文件），发现只有css样式更改的时候可以实现热加载，
//更改js文件的时候却不能实现热加载，上网查资料，发现用react进行开发的时候，需要再配置一个react-hot-loader，具体配置
//写法如下，这样就可以实现js文件的热更新了。。
loaders: [
'react-hot-loader',
'babel-loader?presets[]=react,presets[]=stage-0,presets[]=es2015'
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
//minimize属性配置css代码压缩
options: {minimize: true}
},
{
loader: 'postcss-loader'
}
]
})
},
{
test: /\.less$/,
//注意，使用less-loader要额外安装less，不然会报错
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {sourceMap: true, importLoaders: 1, minimize: true}
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader',
options: {sourceMap: true}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg|ttf)$/i,
//注意，使用url-loader要额外安装file-loader，不然会报错
loaders: [
'url-loader?limit=8192&name=imgs/[name].[hash:8].[ext]'
// 'url-loader?limit=8192&name=imgs/[name].[hash:8].[ext]'
// 'image-webpack-loader' //压缩图片
]
}
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
//生成html模板
new HtmlWebpackPlugin({
template: './src/entry/index.html',
filename: 'index.html'
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
// //注意：上述写法是为浏览器缓存设置，我们在项目中提取出来的第三方类库，由于文件很大，且基本不会改动，所以要利用浏览器
// // 缓存机制增加访问速度，但是存在一个问题，如果我们用webpack打包的时候都带一个hash值，那么每次打包的文件名都会
// // 改变，这样浏览器就不会缓存，所以上述设置可以让webpack打包的时候对第三方提取的公共文件hash值不变，这样，浏览器
// // 就可以缓存了，增加网页浏览速度。要实现这个效果，output中filename属性设置hash值要用chunkHash
// // filename: "vendor.js"
// // (给 chunk 一个不同的名字)
// //minChunks: Infinity
// // 随着 入口chunk 越来越多，这个配置保证没其它的模块会打包进 公共chunk
}),
//css文件打包
// new ExtractTextPlugin("css/[name].[contenthash:8].css"),
new ExtractTextPlugin("css/[name].css"),
new webpack.LoaderOptionsPlugin({
options: {
//加css3前缀
postcss: [precss, autoprefixer]
}
}),
//配置全局常量，在业务代码中可以直接使用（比如在homePage.jsx中可以直接访问NODE_ENV这个变量）
new webpack.DefinePlugin({
"NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'development')
})
]
};打包好的文件为：
打开index.html文件后查看未显示图片的路径
控制的台的错误信息：
浏览器加载的资源文件：
麻烦能看明白的大神给个正解！！！非常非常感谢?
-----最新更新
111111.有的图片能显示有的图片不能显示，他们的路径不一样
能显示出图片：
不能显示出图片：
请问这两种url路径为什么不一样呢？什么导致的呢？
222222.如果我把配置文件里这个css去掉，不给所有的css文件新建个文件夹，那么所有的图片就都能显示了
这又是为什么呢？
麻烦大神能给出指导，指点迷津啊。???
这其实是
ExtractTextPlugin一个很常见的坑，表现为css文件中的图片引入，打包后的图片路径被添加了css路径前缀,出现这种问题是原因是你的图片是相对路径导致的，改成绝对路径就可以了，在ExtractTextPlugin加入publicPath: '/dist/'或者url-loader里面加入publicPath: '/dist/'都可以解决