webpack 配置选项理解

我们通过配置选项来使用 webpack。官方文档 介绍的非常全面，由于水平有限还是有很多不能理解，所以针对一些用到的读官方文档不能理解清楚的 TTK 前端开源框架 的 ttk-app-core 项目 用到的配置项在此记录说明。

• output.library output.libraryTarget
  可以让我们使用不同的方式引入第三方开发类库。
  output.libraryTarget 用于控制如何暴露 webpack 打包的内容，默认值为 var。
  配合 output.library 绑定的值一起发挥作用。

output: {
    path: path.join(__dirname, 'vendor'),
    filename: '[name].[chunkhash:8].dll.js',
    library: '[name]_lib', 
},

在项目中可以配合 DllPlugin 中的 name 将其写入到 manifest.json 中

new webpack.DllPlugin({
    context: __dirname,
    name: '[name]_lib',
    path: path.join(__dirname, 'vendor', '[name].manifest.json'),
}),

• resolve
  应用于模块解析的配置即指定 import 的文件后缀这样就可以直接用 import 在项目中进行引用，可以解析项目中自己封装的模块，通过 alias 别名配置来引用，通过 extensions 来配置其扩展名。

resolve: {
    extensions: [".js"],
    alias: Object.assign({
        'edf-component': path.resolve(projectRootPath, './component/index.js'),
        'webapi': path.resolve(projectRootPath, './api/index.js'),
        'eharts': path.resolve(projectRootPath, './vendor/echarts.min.js')
    }, aliasModule)
},

• externals
  外部扩展：不打包这些模块，而是在运行时从环境中请求他们，常用于第三方不需要自己更改维护的类库。

externals: {
    "echarts": 'echarts',
    "zrender": 'zrender',
},

webpack-dev-server

contentBase - 路径
port - 端口
compress - 服务器压缩
open - 自动打开浏览器