var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于从webpack生成的bundle中提取文本到特定文件中的插件 // 可以抽取出css，js文件将其与webpack输出的bundle分离 var ExtractTextPlugin = require('extract-text-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env // 合并基础的webpack配置 var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, // 配置webpack的输出 output: { // 编译输出目录 path: config.build.assetsRoot, // 编译输出文件名格式 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 没有指定输出名的文件输出的文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, // 配置webpack插件 plugins: [ // new webpack.DefinePlugin({ 'process.env': env }), // 丑化压缩代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // 抽离css文件 new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] }) // gzip模式下需要引入compression插件进行压缩 if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
6.config/index.js
// see for documentation. var path = require('path') module.exports = { // 构建产品时使用的配置 build: { // webpack的编译环境 env: require('./prod.env'), // 编译输入的index.html文件 index: path.resolve(__dirname, '../dist/index.html'), // webpack输出的目标文件夹路径 assetsRoot: path.resolve(__dirname, '../dist'), // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: 'https://www.jb51.net/', // 使用SourceMap productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 默认不打开开启gzip模式 productionGzip: false, // gzip模式下需要压缩的文件的扩展名 productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, // 开发过程中使用的配置 dev: { // webpack的编译环境 env: require('./dev.env'), // dev-server监听的端口 port: 8080, // 启动dev-server之后自动打开浏览器 autoOpenBrowser: true, // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: 'https://www.jb51.net/', // 请求代理表，在这里可以配置特定的请求代理到对应的API接口 // 例如将'/api/xxx'代理到'www.example.com/api/xxx' proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. // 是否开启 cssSourceMap cssSourceMap: false } }
在使用npm run build进行webpack打包后，发布的项目可能会遇到图片等找不到的情况。
这里有一个万能解决办法：
1. 将config/index.js 里面的 assetsPublicPath:'https://www.jb51.net/' 改为assetsPublicPath:'./'
2. build/util.js里面的
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'https://www.jb51.net/' })
将其中的publicPath改为：publicPath：'../../'就可以了。这样打包出来的路径就是正确的了。