运用Vue+Webpack在重构公司的一套系统,由于需要保证原业务和重构的并行开发,所以项目目录大致如下,组件化的内容先暂时都在assets文件夹里
Webpack.config文件如下:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var webpack = require('webpack');
var debug = process.env.NODE_ENV !== 'prod';
var RootDir = process.cwd();
var config = {
entry: {
bundle:'./src/entry.js',
market:'./src/market.js',
vendor: ['vue','vue-router','vue-resource']
},
output: {
path: __dirname + (debug?'/build/dev':'/build/public'), // 指定某些loader 的输出路径(js/img)
filename: debug?'js/[name].js':'js/[name].[chunkhash:8].min.js',
publicPath: debug?'/assets/build/dev/':'/assets/build/public/', // generate URL
chunkFilename: debug?'chunks/[chunkhash:8].chunk.js':'chunks/[chunkhash:8].chunk.min.js'
},
resolve: {
// 构建时,module 的查找路径
root: [RootDir + '/src', RootDir + '/node_modules'],
// 定义模块别名,缩短构建时路径搜索时间
alias: {
'vue':'vue/dist/'+(debug?'vue.js':'vue.min.js'),
'vue-router':'vue-router/dist/'+(debug?'vue-router.js':'vue-router.min.js'),
'vue-resource':'vue-resource/dist/'+(debug?'vue-resource.js':'vue-resource.min.js')
},
// 自动扩展的文件名后缀
extensions: ['', '.js', '.css', '.scss', '.vue', '.png', '.jpg']
},
module: {
loaders: [
{ // use vue-loader for *.vue files
test: /\.vue$/,
loader: 'vue'
},
{ // use bable-loader for *.js files
test: /\.js$/,
loader: 'babel',
query: {compact: false},
exclude: /node_modules/ // regex
},
{
test: /\.(png|jpe?g|gif|svg)$/,
// loader: 'url',
loaders: [
/*'image?{bypassOnDebug: true, progressive:true, \
optimizationLevel: 3, pngquant:{quality: "65-80"}}',*/
'url?limit=10000&name=img/[hash:8].[name].[ext]'
]
/*,
query: {
limit: 10000,
//custom naming format if file is larger than the threshold
name: '[name].[ext]?[hash]'
}
*/
}
],
//不在扫描数组中每个正则所匹配的模块的依赖
noParse:[/^vue$/,/^vue-router$/,/^vue-resource$/],
//外部依赖,可以引用外部资源,例如CDN
//externals:{'vue':true}
},
// bable config
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
// vue-loader config
vue: {
autoprefixer: {
browsers: ['> 1%']
},
loaders: {
css: ExtractTextPlugin.extract('css'),
sass: ExtractTextPlugin.extract('css!sass'),
js: 'babel!eslint'
}
},
plugins: [
//CSS提取为独立文件
new ExtractTextPlugin(debug?'css/[name].style.css':'css/[name].style.[contenthash:8].min.css',{allChunks:true}),
//避免重复的模块
new webpack.optimize.DedupePlugin(),
//将vender提取为公共模块
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
filename: debug?'js/vendor.js':'js/vendor.[chunkhash:8].min.js'
}),
//跟据模板生成html页面
new HtmlWebpackPlugin({
template: 'src/template/temp.php',
filename: './../../../protected/views/layouts/weixin_layout.php',
excludeChunks: ['market']
}),
new HtmlWebpackPlugin({
title: '集市',
template: 'src/template/markettemp.php',
filename: './../../../protected/views/layouts/market_layout.php',
excludeChunks: ['bundle']
}),
new webpack.ProvidePlugin({
'_': 'lodash'
})
]
}
if (!debug) {
//压缩
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({compress:{warnings:false}})
);
//清空文件夹
config.plugins.push(
new CleanWebpackPlugin(['public'], {
root: RootDir + '/build', // 根路径(绝对路径)
verbose: true, // 控制台打印日志
dry: false // 不清空任何文件,用于测试
})
);
config.output.sourceMapFilename = '[file].map';
config.devtool = 'source-map';
}
module.exports = config;
之后每次在assets文件夹里运行webpack --profile --display-error-details --colors --watch
项目都能正常启动,但只要保存一下组件文件,刷新后页面就会报错
报错内容为__webpack_require__(3).Object为undefined
通过diff比对,主要是vendor.js发生了变化,但具体变化如下主要为require的数字重新生成,一些函数方法更换了顺序,结果导致了报错,想问一下为什么会这样。
具体的diff比对文件由于较长,大家可以下载查看diff文件 求教,这是什么问题...
另外还想顺路问一下我的Webpack配置还有没有更好的优化方法。麻烦大家了,谢谢
cache设置为false看看,watch没怎么用过,我每次都是重新编译的