前端开发 碎碎念

2333，怎么都是关于Vue的问题。。。我真没黑Vue开发者，不过也可以看出，Vue的小白受众的确比较多。现在基于Vue，React的SPA单页应用开发，都倾向于采用webpack的模块化构建方案。可能大多数人，开发一个项目，会使用脚手架工具（vue-cli, create-react-app 等等）快速搭建项目的骨架。但这些工具生成的webpack配置，都比较复杂，很多细节都没有解释清楚。往往项目一复杂，webpack的配置往往需要修改调整，就容易踩坑了。今天总结一下，项目中经常用到的几个webpack配置项，希望大家能够对webpack的配置有一个清晰的认识。

webpack配置项

1. entry

entry用于指定应用程序的入口文件。入口文件是webpack开始构建应用程序的地方。

entry: './src/index.js'

2. output

output用于指定构建后的文件输出目录和文件名。

output: {
  filename: 'bundle.js',
  path: __dirname + '/dist'
}

3. loader

loader用于对某些类型的文件进行预处理。比如，我们可以使用babel-loader将ES6代码转换成ES5代码。

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader'
    }
  ]
}

4. plugin

plugin用于扩展webpack的功能。比如，我们可以使用uglifyjs-webpack-plugin来对构建后的文件进行压缩。

plugins: [
  new UglifyJsPlugin()
]

5. devServer

devServer用于在开发过程中启动一个本地服务器，方便开发调试。

devServer: {
  port: 8080,
  open: true
}

6. alias

alias用于设置别名，可以方便地引用文件。

resolve: {
  alias: {
    '@': __dirname + '/src'
  }
}

7. optimization

optimization用于对构建后的文件进行优化。比如，我们可以使用splitChunksPlugin来对代码进行分块。

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

8. mode

mode用于指定webpack的运行模式。有三种模式：development, production, none。

mode: 'production'

总结

以上是一些经常用到的webpack配置项。希望大家能够通过本文对webpack的配置有一个更深入的理解。