webpack简单笔记

出入口配置

1：入口和出口，一般单页面应用，就只有一个程序启动入口entry和出口output：

const config = {
// 给entry传一个字符串就可以了
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
module.exports = config;
复制代码

2: 但是需要搭建多页面应用的话，entry和output配置如下：

const config = {
// entry 传对象集合就好了
  entry: {
    A: './src/A/index.js',
    B: './src/B/index.js',
    C: './src/C/index.js'
  },
  output: {
  // [name]占位符确保每个文件具有唯一的名称， __dirname， 代指当前目录名
    filename: '[name].js',
    path: __dirname + '/dist'
  }
   // 写入到硬盘：./dist/A.js, ./dist/B.js, ./dist/C.js
};
复制代码

3:使用CDN和资源hash配置：

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}
复制代码

开发模式

module.exports = {
  mode: 'production | development'
};
复制代码

loader和plugins

1：理解
loader: 由于webpack只具备解析js和json的能力，所以需要用loader把各种模块的源代码进行转换，如把TypeScript转成JavaScript，把图片转成data URL，把css转成遵从Common Js规范的模块等等。

plugins：用于文件的压缩、抽离，打包优化。

过多的使用loader和plugins会导致webpack的项目配置十分臃肿复杂，甚至会导致打包速度变慢。升级webpack版本的时候也有可能会导致,某一个plugins或loader报错。

2：配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;
复制代码

工作机制

1：基本配置
webpack配置是遵循Common JS规范（通过使用require(…)方法导入文件、使用其它工具函数），导出一个对象的Js文件。当需要多个Target时，module.exports = config， config是一个由多个对象组成的数组。

2:基本要素

module是webpack运行的基本条件；

模块路径是解析模块的必要条件；

Manifest文件用来引导模块的打包与加载（里面包括了加载和处理模块的逻辑）；

模块热替换(HMR – Hot Module Replacement)，热更新功能主要就是对manifest文件中模块加载逻辑的改变。

3：总结

webpack的打包加载逻辑在于manifest文件，manifest文件包括的就是模块间的加载处理逻辑，模块间的加载处理逻辑是来源于模块间的相关引用(import, require等)，热更新就是改变manifest文件中的逻辑。