欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack起步

程序员文章站 2022-06-27 14:06:25
为什么要使用webpack 很牛逼的样子 基本概念 entry配置 output设置 filename字段中可以填的选项 模板 | 描述 | 指定长度 | | [hash] | 模块标识符(module identifier)的 hash | [chunkhash] | chunk 内容的 hash ......

为什么要使用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. 包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。