Webpack学习笔记(一)：基本概念

webPack基础概念

webpack是一个打包工具，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

---

入口

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js，但可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点，例如webpack.base.conf中配置的入口，即将打包的入口配置为src目录下的main.js

module.exports = {
  entry: {
    app: './src/main.js'
  },

入口也可以通过对象语法配置多个入口，目前项目中没有应用

出口

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
项目中在webpack.base.conf中配置了output，又在不同环境下覆盖了这个属性，后续可以考虑对这部分进行优化

// webpack.base.conf中:
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    library: config.appName,
    libraryTarget: 'umd',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.publicPath
      : config[process.env.NODE_ENV].publicPath
  },
// webpack.k8s.conf中
output: {
    path: config.k8s.assetsRoot,
    filename: '[name].js',
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

模式(mode)

提供 mode 配置选项，告知 webpack 使用相应环境的内置优化。
可能的值有：none, development 或 production（默认）。目前在项目中没有直接使用development或者production，而是对应进行了自定义的修改

loader

用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许直接在 JavaScript 模块中 import CSS文件

有三种使用 loader 的方式：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。
  例如: 项目中在webpack.base.conf中配置的示例，test即配置了匹配规则，loader制定了该匹配规则下的loader，options是一些具体的配置，这里面引入了我们自定义的配置vueLoaderConfig

// webpack.base.conf
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
},

// vueLoaderConfig
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: false
  }),
  postcss: [
    require('autoprefixer')({
      browsers: ['last 2 versions']
    })
  ]
}

插件 plugin

插件是 webpack 的 支柱 功能。webpack 自身也是构建相同的插件系统之上的,
插件目的在于解决 loader 无法实现的其他事。
例如，在webpack.base.conf中使用的插件CommonsChunkPlugin可以将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来页面速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
该插件的使用是前端打包会产生两个js文件的原因
注意 该插件在已经从 webpack v4 legato 中移除

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ]