续vue1.0升级2.0后，webpack和开发环境所有插件也要求升级到新版，升级报错主要集中在插件属性变化，升级完成这样古董项目就焕然一新了。
一、话不多说上代码：
旧版本号
"webpack": "^1.13.1"
新版本号
"webpack": "^3.12.0",
旧版本webpack-base-config.js
// webpack.base.config.js
var path = require('path');
// var webpack = require('webpack');
module.exports = {
// 入口
entry: {
main: ['./src/main'],
vendors: ['vue', 'vue-router']
},
// 输出
output: {
path: path.join(__dirname, './dist')
},
// 加载器
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: 'style!css!autoprefixer'
}, {
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}, {
test: /\.less/,
exclude: /^node_modules$/,
loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!less-loader`
}, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.(html|tpl)$/,
loader: 'html-loader?minimize=false'
}, {
test: /iview.src.*?js$/,
loader: 'babel'
}]
},
// 转es5
babel: {
presets: ['es2015'],
plugins: ['transform-runtime', 'transform-object-rest-spread']
},
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
'@': path.join(__dirname, './src'),
'@Facade': path.join(__dirname, './src/libs/facade.js'),
// api & msg
Api: path.join(__dirname, './src/api/Api.js'),
Msg: path.join(__dirname, './src/libs/util/Msg.js')
}
},
plugins: [
]
};
新版本webpack-base-config.js
// webpack.base.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// var webpack = require('webpack');
module.exports = {
// 入口
entry: {
main: ['./src/main'],
vendors: ['vue', 'vue-router']
},
// 输出
output: {
path: path.join(__dirname, './dist')
},
// 加载器
// config.vue = {
// loaders: {
// css: ExtractTextPlugin.extract(
// 'style-loader',
// 'css-loader?sourceMap', {
// publicPath: '/dist/'
// }
// ),
// less: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!less-loader'
// ),
// sass: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!sass-loader'
// )
// }
// };
module: {
rules: [{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
less: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: 'css-loader!less-loader'
}),
css: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?sourceMap',
publicPath: '/dist/'
}),
sass: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: 'css-loader!sass-loader'
})
}
}
}, {
loader: 'iview-loader',
options: {
prefix: true
}
}]
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015'],
plugins: ['transform-runtime', 'transform-object-rest-spread']
}
}, {
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
// loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}, {
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader?sourceMap'
}, {
test: /\.less/,
exclude: /^node_modules$/,
loader: `style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }!less-loader`
}, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.(html|tpl)$/,
loader: 'html-loader?minimize=false'
}, {
test: /iview.src.*?js$/,
loader: 'babel-loader'
}]
},
// 转es5
// babel: {
// presets: ['es2015'],
// plugins: ['transform-runtime', 'transform-object-rest-spread']
// },
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extensions: ['*', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
'@': path.join(__dirname, './src'),
'@Facade': path.join(__dirname, './src/libs/facade.js'),
// api & msg
Api: path.join(__dirname, './src/api/Api.js'),
Msg: path.join(__dirname, './src/libs/util/Msg.js'),
'vue': 'vue/dist/vue.js' //内部为正则表达式 vue结尾的
}
},
plugins: [
]
};
旧版本webpack-dev-config.js
// webpack.dev.config.js
var webpack = require('webpack');
var config = require('./webpack.base.config');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.devtool = '#source-map'; // source-map
config.output.publicPath = './dist/'; // 资源路径
config.output.filename = '[name].js'; // 入口js命名
config.output.chunkFilename = '[name].chunk.js'; // 路由js命名
config.vue = {
loaders: {
css: ExtractTextPlugin.extract(
'style-loader',
'css-loader?sourceMap', {
publicPath: '/dist/'
}
),
less: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!less-loader'
),
sass: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!sass-loader'
)
}
};
config.plugins = (config.plugins || []).concat([
// 提取CSS
new ExtractTextPlugin('[name].css', {
allChunks: true,
resolve: ['modules']
}),
// 提取第三方库
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
// 构建html文件
new HtmlWebpackPlugin({
filename: '../index.html',
template: './src/template/index.html',
inject: true
})
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) {
err && console.error('Open file env.js failed! [%s]', err);
var buf = 'export default "development";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
err && console.error('Write file env.js failed! [%s]', err);
});
});
module.exports = config;
新版本webpack-dev-config.js
// webpack.dev.config.js
var webpack = require('webpack');
var config = require('./webpack.base.config');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.devtool = '#source-map'; // source-map
config.output.publicPath = '/dist/'; // 资源路径
config.output.filename = '[name].js'; // 入口js命名
config.output.chunkFilename = '[name].chunk.js'; // 路由js命名
// config.vue = {
// loaders: {
// css: ExtractTextPlugin.extract(
// 'style-loader',
// 'css-loader?sourceMap', {
// publicPath: '/dist/'
// }
// ),
// less: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!less-loader'
// ),
// sass: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!sass-loader'
// )
// }
// };
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
}),
// 提取CSS
// {
// filename : 'bundle.css',
// disable : false,
// allChunks : true
// }
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true,
disable: false
// resolve: ['modules']
}),
// 提取第三方库
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }),
// 构建html文件
new HtmlWebpackPlugin({
filename: '../index.html',
template: './src/template/index.html',
favicon: './favicon.png',
inject: true
// chunks: ['manifest', 'vendor', 'app']
}),
new webpack.HotModuleReplacementPlugin()
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) {
err && console.error('Open file env.js failed! [%s]', err);
var buf = 'export default "development";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
err && console.error('Write file env.js failed! [%s]', err);
});
});
module.exports = config;
旧版本webpack-prod-config.js
// webpack.prod.config.js
var webpack = require('webpack');
var path = require('path');
var config = require('./webpack.base.config');
var CleanPlugin = require('clean-webpack-plugin'); //清理文件夹
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.output.publicPath = './dist/'; // 资源路径,根据需要可改为cdn地址
config.output.filename = '[name].[hash].js'; // 带hash值的入口js名称
config.output.chunkFilename = '[name].[hash].chunk.js'; // 带hash值的路由js名称 [name].[hash].chunk.js
config.vue = {
loaders: {
css: ExtractTextPlugin.extract(
'style-loader',
'css-loader', {
publicPath: '../dist/'
// 特别提醒,如果这里的publicPath是以http://xxx.xxx这样以http://开头的,要写成
// publicPath: "http:\\xxx.xxx",否则会编译为"http:/xxx.xxx"
}
),
less: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!less-loader'
),
sass: ExtractTextPlugin.extract(
'vue-style-loader',
'css-loader!sass-loader'
)
}
};
config.plugins = (config.plugins || []).concat([
// 清空dist目录
new CleanPlugin(['dist'], {
'root': path.resolve(__dirname, './'),
verbose: true,
dry: false
}),
// 设置生产模式
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
// 提取带hash值的css名称
new ExtractTextPlugin('[name].[hash].css', {
allChunks: true,
resolve: ['modules']
}),
// 提取带hash值的第三方库名称
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[hash].js'),
// 压缩文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// 构建html文件
new HtmlWebpackPlugin({
filename: '../index_prod.html',
template: './src/template/index.html',
inject: true
})
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) {
err && console.error('Open file env.js failed! [%s]', err);
var buf = 'export default "production";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
err && console.error('Write file env.js failed! [%s]', err);
});
});
module.exports = config;
新版本webpack-prod-config.js
// webpack.prod.config.js
var webpack = require('webpack');
// var path = require('path');
var config = require('./webpack.base.config');
var { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清理文件夹
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
config.output.publicPath = '/dist/'; // 资源路径,根据需要可改为cdn地址
config.output.filename = '[name].[hash].js'; // 带hash值的入口js名称
config.output.chunkFilename = '[name].[hash].chunk.js'; // 带hash值的路由js名称 [name].[hash].chunk.js
// config.vue = {
// loaders: {
// css: ExtractTextPlugin.extract(
// 'style-loader',
// 'css-loader', {
// publicPath: '../dist/'
// // 特别提醒,如果这里的publicPath是以http://xxx.xxx这样以http://开头的,要写成
// // publicPath: "http:\\xxx.xxx",否则会编译为"http:/xxx.xxx"
// }
// ),
// less: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!less-loader'
// ),
// sass: ExtractTextPlugin.extract(
// 'vue-style-loader',
// 'css-loader!sass-loader'
// )
// }
// };
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
}),
// 清空dist目录
new CleanWebpackPlugin(),
// 设置生产模式
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
// 提取带hash值的css名称
new ExtractTextPlugin({
filename: '[name].[hash].css',
allChunks: true,
disable: false
// resolve: ['modules']
}),
// 提取带hash值的第三方库名称
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.[hash].js' }),
// 压缩文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// 构建html文件
new HtmlWebpackPlugin({
filename: '../index_prod.html',
favicon: './favicon.png',
template: './src/template/index.html',
inject: true
})
]);
// 写入环境变量
fs.open('./src/config/env.js', 'w', function (err, fd) {
err && console.error('Open file env.js failed! [%s]', err);
var buf = 'export default "production";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
err && console.error('Write file env.js failed! [%s]', err);
});
});
module.exports = config;