webpack相关学习

[du1wu2lzlz]

• 深入浅出webpack: http://webpack.wuhaolin.cn/%E5%89%8D%E8%A8%80.html
  注: 此教程只跟进到了webpack3，webpack4还在更新中
• webpack
• webpack相关资料
• 松松关于webpack的理解
• slashhuang关于webpack的理解

---

webpack核心

• entry : 定义整个编译过程的起点
• output : 定义整个编译过程的终点
• module : 定义模块module的处理方式 如: loaders
• plugins : 对编译完成后的内容进行二度加工
  CommonChunkPlugin 可以对代码进行分割

---

一切皆模块

无论你是jsx,tsx,html,css,scss,less,png文件，webpack一视同仁为module。
并且每个文件[module]都会经过相同的编译工序 loader==> plugin。

webpack基础配置

Webpack 使用一个名为 webpack.config.js 的配置文件，要编译 JSX，先安装对应的 loader:
npm install babel-loader --save-dev

假设我们在当前工程目录有一个入口文件 entry.js，React 组件放置在一个components/目录下，组件被 entry.js 引用，要使用 entry.js，我们把这个文件指定输出到 dist/bundle.js，
Webpack 配置如下：

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件
就可以直接用 import Hello from 'Hello' 引用。

loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件，
这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。

---

webpack之external

按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。

假设：我们开发了一个自己的库，里面引用了lodash这个包，经过webpack打包的时候，发现如果把这个lodash包打入进去，打包文件就会非常大。那么我们就可以externals的方式引入。也就是说，自己的库本身不打包这个lodash，需要用户环境提供。

---

external的配置

externals的配置有以下几种：array , object ,reg。这三种形式都可以传入，前者其实是对后者的包含。
参考(https://www.tangshuang.net/3343.html)

---

devtool

设置source编译方式

devtool :  'eval-source-map'

---