vue2默认的webpack配置

Vue2 默认 Webpack 配置

1. 默认Loader配置

// 1. vue-loader
// 处理.vue单文件组件
{
  test: /\.vue$/,
  loader: 'vue-loader'
}

// 2. babel-loader
// 处理JavaScript
{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
}

// 3. 样式处理loader
// 处理CSS/SCSS/LESS等
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'postcss-loader'
  ]
}

// 4. 文件处理loader
// 处理图片等资源
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 4096,
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]'
      }
    }
  }
}

// 5. 字体处理loader
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 4096,
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[hash:8].[ext]'
      }
    }
  }
}

2. 默认Plugin配置

// 1. VueLoaderPlugin
// 处理.vue文件
new VueLoaderPlugin()

// 2. HtmlWebpackPlugin
// 生成HTML文件
new HtmlWebpackPlugin({
  template: 'public/index.html'
})

// 3. DefinePlugin
// 定义环境变量
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  }
})

// 4. CopyWebpackPlugin
// 复制静态资源
new CopyWebpackPlugin({
  patterns: [
    {
      from: 'public',
      to: 'dist',
      globOptions: {
        ignore: ['**/index.html']
      }
    }
  ]
})

// 5. MiniCssExtractPlugin
// 提取CSS到单独文件
new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash:8].css'
})

3. 开发环境特有配置

// 1. HotModuleReplacementPlugin
// 热模块替换
new webpack.HotModuleReplacementPlugin()

// 2. FriendlyErrorsPlugin
// 优化错误提示
new FriendlyErrorsPlugin()

// 3. CaseSensitivePathsPlugin
// 强制区分大小写
new CaseSensitivePathsPlugin()

4. 生产环境特有配置

// 1. TerserPlugin
// 压缩JavaScript
new TerserPlugin({
  terserOptions: {
    compress: {
      drop_console: true
    }
  }
})

// 2. CssMinimizerPlugin
// 压缩CSS
new CssMinimizerPlugin()

// 3. CompressionPlugin
// 生成gzip压缩文件
new CompressionPlugin({
  test: /\.(js|css|html|svg)$/,
  algorithm: 'gzip'
})

5. 优化配置

// 1. 代码分割
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        name: 'chunk-vendors',
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial'
      },
      common: {
        name: 'chunk-common',
        minChunks: 2,
        priority: -20,
        chunks: 'initial',
        reuseExistingChunk: true
      }
    }
  }
}

// 2. 缓存配置
optimization: {
  runtimeChunk: 'single',
  moduleIds: 'deterministic'
}

6. 常用配置选项

// 1. 路径别名
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'vue$': 'vue/dist/vue.esm.js'
  }
}

// 2. 扩展名解析
resolve: {
  extensions: ['.js', '.vue', '.json']
}

// 3. 性能提示
performance: {
  hints: false
}

7. 最佳实践

• 使用vue-cli创建项目
• 根据需求修改配置
• 注意版本兼容性
• 合理使用优化选项
• 保持配置简洁
• 做好错误处理

8. 常见问题

// 1. 热更新不生效
// 解决方案：检查HotModuleReplacementPlugin配置

// 2. 样式处理问题
// 解决方案：检查loader顺序和配置

// 3. 打包体积过大
// 解决方案：使用代码分割和压缩

总结

Vue2默认配置的优点：

1. 开箱即用
2. 配置完善
3. 性能优化
4. 开发体验好
5. 维护方便
6. 社区支持
7. 文档完善
8. 稳定性高