这两天使用webpack+WDS+HMR(热更新)来实现一个小东西。 然而发现在publicPath, path两个参数都设置正确(输出看确实是正确的)的情况下, html里仍然无法正确的获取到css文件等静态文件(返回404). 如何解决这个问题呢? 是哪里配置出错了嘛? 贴上我的配置信息。
webpack.base.conf.js
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
entry: {
vendor: [
'vue',
'vue-router',
],
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'routes$': path.resolve(__dirname, '../src/routes/index.js'),
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
// ],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
},
vue: {
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}
},
webpack.dev.conf.js
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var DashboardPlugin = require('webpack-dashboard/plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// eval-source-map is faster for development
devtool: '#eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new DashboardPlugin({ port: 8080 })
]
})
迷茫2017-04-11 10:59:25
谢邀,你能贴一个你的项目文件目录结构么?还有你没说你的WDS的启动过程中的初始目录是啥。
app: './src/main.js',
这个地方应该有问题吧,你的src应该在上一级目录,根build同级
天蓬老师2017-04-11 10:59:25
▃ /home/mrcode/Desktop/work/code/my-project/cqut-chat-client
|-- README.md
|-- assets
| |-- font-awesome.min.css
| `-- logo.png
|-- build
| |-- build.js
| |-- check-versions.js
| |-- dev-client.js
| |-- dev-server.js
| |-- utils.js
| |-- webpack.base.conf.js
| |-- webpack.dev.conf.js
| `-- webpack.prod.conf.js
|-- config
| |-- dev.env.js
| |-- index.js
| |-- prod.env.js
| `-- test.env.js
|-- index.html
|-- package.json
|-- src
| |-- assets
| |-- components
| |-- main.js
| `-- routes
|-- static
|-- test
| |-- e2e
| `-- unit
`-- tree_out
这是项目目录结构, src里的assets是默认自带的。 我的项目output的位置就是最外层的assets 输出看过的。 @不爱吃西红柿的鱼 谢谢啦