通过 npm 运行 webpack 打包代码

在 package.json 中的 scripts 中 build 执行 webpack 即可 node_modules 里面的 webpack

webpack 的基本用法

核心概念 entry

单入口：entry 是一个字符串

module.exports = {
     entry: './path/to/my/entry/file.js'
   }

多入口：entry 是一个对象

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

核心概念之 Output

Output 用来告诉 webpack 如何将编译后的文件输出到磁盘 （对应打包后到哪个文件下 叫什么名字）

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename:'[name].js',
        path: __dirname + '/dist'
    }
}

[name].js 属于占位符 在多个文件打包时需要用占位符来命名；

核心概念之 Loaders

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其他文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。

loaders 本身是一个函数，接受源文件作为参数，返回转换的结果。 就是说 css ts sass 包括我们用到的es6+语法等 这些后缀在 webpack 中是不支持解析的 所以我们要借助 loaders 去解析它们，让 webpack 可以识别到。

常见的 loaders

babel-loader 转换 ES6 ES7 等 JS新特性语法
css-loader 支持 .css 文件的加载和解析
less-loader 将 less 文件转换成 css
ts-loader 将  ts 文件转换成 js
file-loader 进行图片，字体等的打包
raw-loader 将文件以字符串的形式导入
thread-loader 多进程打包 js 和 css

Loaders 的用法

const path = require('path');

module.exports = {
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test:/\.txt$/, use:'row-loader' }
        ]
    }
}

test 指定匹配规则
use 指定使用的 loader 名称