webpack起步

为什么要使用webpack

很牛逼的样子

https://www.webpackjs.com/comparison/

基本概念

1. 入口(entry)
module.exports = {
  entry: './path/to/my/entry/file.js'
};

2. 出口(output)
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

3. loader处理静态资源
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

4. plugins插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5. 模式
module.exports = {
  mode: 'production'
};

entry配置

1. 单入口
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

2. 对象语法，分离 应用程序(app) 和 第三方库(vendor) 入口
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

3. 多页面应用程序
onst config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

output设置

//单entry的output写法
const config = {
 entry: {
    pageOne: './src/pageOne/index.js'
  }
  output: {
    filename: 'my-first-webpack.bundle.js'
  }
};

//如果希望可以拆分代码，或使用各种插件，用name给每个entry指定不同的名称
const config = {
 entry: {
    pageOne: './src/pageOne/index.js'，
    pageTwo: './src/pageTwo/index.js'
  }
  output: {
    filename: "[name].bundle.js"
  }
};

//publicPath指定URI基准路径
const config = {
 entry: {
    pageOne: './src/pageOne/index.js'，
    pageTwo: './src/pageTwo/index.js'
  }
  output: {
    publicPath: "/assets/",
    filename: "[name].bundle.js"
  }
};
//打包出来后就会根据基准路径找资源
<link href="/assets/spinner.gif" />
background-image: url(/assets/spinner.gif);

filename字段中可以填的选项

模板	描述	指定长度
[hash]	模块标识符(module identifier)的 hash
[chunkhash]	chunk 内容的 hash	[hash] 和 [chunkhash] 的长度可以使用 [hash:16]（默认为20）来指定
[name]	模块名称
[id]	模块标识符(module identifier)
[query]	模块的 query，例如，文件名 ? 后面的字符串

loader让webpack可以处理静态资源

嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

npm install --save-dev css-loader
npm install --save-dev ts-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

//对于一个静态资源需要多个loader处理时可以这样写
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

plugin对打包过程进行控制

webpack常用插件

Name	Description
AggressiveSplittingPlugin	将原来的 chunk 分成更小的 chunk
BabelMinifyWebpackPlugin	使用 babel-minify进行压缩
BannerPlugin	在每个生成的 chunk 顶部添加 banner
CommonsChunkPlugin	提取 chunks 之间共享的通用模块
CompressionWebpackPlugin	预先准备的资源压缩版本，使用 Content-Encoding 提供访问服务
ContextReplacementPlugin	重写 require 表达式的推断上下文
CopyWebpackPlugin	将单个文件或整个目录复制到构建目录
DefinePlugin	允许在编译时(compile time)配置的全局常量
DllPlugin	为了极大减少构建时间，进行分离打包
EnvironmentPlugin	DefinePlugin 中 process.env 键的简写方式。
ExtractTextWebpackPlugin	从 bundle 中提取文本（CSS）到单独的文件
HotModuleReplacementPlugin	启用模块热替换(Enable Hot Module Replacement - HMR)
HtmlWebpackPlugin	简单创建 HTML 文件，用于服务器访问
I18nWebpackPlugin	为 bundle 增加国际化支持
IgnorePlugin	从 bundle 中排除某些模块
LimitChunkCountPlugin	设置 chunk 的最小/最大限制，以微调和控制 chunk
LoaderOptionsPlugin	用于从 webpack 1 迁移到 webpack 2
MinChunkSizePlugin	确保 chunk 大小超过指定限制
NoEmitOnErrorsPlugin	在输出阶段时，遇到编译错误跳过
NormalModuleReplacementPlugin	替换与正则表达式匹配的资源
NpmInstallWebpackPlugin	在开发时自动安装缺少的依赖
ProvidePlugin	不必通过 import/require 使用模块
SourceMapDevToolPlugin	对 source map 进行更细粒度的控制
EvalSourceMapDevToolPlugin	对 eval source map 进行更细粒度的控制
UglifyjsWebpackPlugin	可以控制项目中 UglifyJS 的版本
ZopfliWebpackPlugin	通过 node-zopfli 将资源预先压缩的版本

webpack支持模块

1. ES2015 import 语句
2. CommonJS require() 语句
3. AMD define 和 require 语句
4. css/sass/less 文件中的 @import 语句。
5. 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

模块解析规则

1.绝对路径
import "/home/me/file";
import "C:\\Users\\me\\file";

2.相对路径
//会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。
import "../src/file1";
import "./file2";

3.模块路径
import "module";
import "module/lib/file";

//模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。
//1. 路径是文件就直接打包,否则根据配置的 [resolve.extensions]进行打包
//2. 如果是文件夹
//   (1) 先找package.json中的我们通过
//        resolve.mainFields 指定的字段
//   (2) 没有package.json查找，我们配置的resolve.mainFiles字段来找

manifest

bundle文件会通过解析Manifest来解析和加载模块，相当于一个文件系统, 告诉bandle文件哪个资源在哪个目录下

Runtime

在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码

runtime 包含：
1. 在模块交互时，连接模块所需的加载和解析逻辑。
2. 包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。