详解基于vue-cli优化的webpack配置

1. 什么是vue-cli优化的webpack配置？

vue-cli是Vue.js的脚手架工具，它能够简化Vue.js应用程序的搭建。默认情况下，vue-cli使用webpack作为打包工具。通常情况下，由于项目的特性、需求等意外的原因，你会需要自己对webpack进行一些优化配置，以满足项目的性能优化。

1. 如何进行基于vue-cli优化的webpack配置？

在进行webpack配置优化之前，你需要确保已经安装好了vue-cli脚手架工具以及对应的版本。你可以使用vue-cli --version命令来查看是否安装了vue-cli，以及其对应的版本号。

然后，你需要创建一个基于vue-cli的工程，并且执行vue init webpack命令初始化webpack配置。接着按照下面的步骤进行优化。

（1）添加必要的webpack loader和plugin

添加babel-loader，解析ES6语法，并且可以根据需要添加更多loader，比如sass、less、postcss-loader等等。

添加vue-loader，编译.vue文件，使得组件可以使用.vue的语法，实现了模板、逻辑和样式的单文件组件开发；

添加UglifyJSPlugin，用于压缩代码文件的大小；

添加ExtractTextPlugin，用于将CSS文件从JS文件中抽离出来。

（2）启用代码分离

优化webpack的构建性能，启用代码分离，将业务代码与公共代码分离出来，减小各个打包后的文件大小，避免重复打包。

（3）启用cdn加速

加速资源的下载速度，可以减小加载文件的时间，提高网页的响应速度。与此同时，建议使用webpack-bundle-analyzer，帮你分析打包后的文件大小，帮你确定资源文件是否需要进行分离处理。

1. 示例说明

（1）添加loader和plugin示例：

在webpack.base.conf.js文件中添加如下代码：

{
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
   formatter: require('eslint-friendly-formatter')
 }
},
{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang="sass">
     scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang="scss">
     css: 'vue-style-loader!css-loader!postcss-loader' // <style>
   }
 }
},
{
 test: /\.js$/,
 loader: 'babel-loader',
 include: [resolve('src'), resolve('test')]
},
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
   limit: 10000,
   name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
},
{
 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 loader: 'url-loader',
 options: {
   limit: 10000,
   name: utils.assetsPath('media/[name].[hash:7].[ext]')
 }
},
{
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 options: {
   limit: 10000,
   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 }
},

（2）启用代码分离示例：

在配置中添加如下代码：

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
     )
   }
 }),
 new webpack.optimize.CommonsChunkPlugin({
   name: 'manifest',
   chunks: ['vendor']
 }),

（3）启用cdn加速示例：

在配置中添加如下代码：

new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   cdn: {
     css: [
       'https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css'
     ],
     js: [
       'https://cdn.bootcss.com/vue/2.5.2/vue.min.js',
       'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
       'https://cdn.bootcss.com/element-ui/2.4.0/index.js',
       '/static/js/vendor.dll.js',
     ]
   }
 }),

以上是对“详解基于vue-cli优化的webpack配置”的一些攻略说明，希望对你有所帮助。