2019-04-1852709bb80d0dc9a1d49dfaa223f81c8c

99+ Webpack7 分钟读完 (大约 1000 个字) 0次访问

webpack 基础(四)：简单配置

webpack 基础最后一篇，总结了一些loader和plugin的使用。

分割开发环境配置文件

开发环境中需要更具对应的开发环境选择相应的配置文件，这里总结了下简单的根据环境的配置文件。

/* webpack.config.js */
const path = require("path");
const webpack = require("webpack");
const webpackMerge = require("webpack-merge");
const loadPresets = require("./build-utils/loadPresets");
const modeConfig = env => require(`./build-utils/webpack.${env}`)(env);

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = ({ mode, presets } = { mode: "production", presets: []}) => {
  webpackMerge(
    {
      mode,
      plugins: [new HtmlWebpackPlugin(), new webpack.ProgressPlugin()]
    },
    modeConfig(mode),
    loadPresets({ mode, presets })
  )
}

配置了上面的环境，可以通过命令行传值给 env 的时候，对应的调用相应的 webpack.<config>.js。

当让也可以设置一个通用 webpack.base.js 配置。再配置 webpack.prod.js 和 webpack.dev.js，对应的配置文件中，合并 webpack.base.js。

两种方式都可以使用，如何配置看个人啦。

使用Webpack处理CSS

首先需要在我们的webpack配置文件中，添加对应rules。

// ...
module: {
    rules: [
      {
        test: /\.css$/,
        use: [ "css-loader" ]
      }
    ]
  },
// ...

下面我们写一个最简单的css文件，并在一个文件中引用，并打印下来，可以看到

import css from './style.css';
console.log(css);

/* 转换css文件 */
0: (3) ["./src/footer.css", "header {↵  background: #fff;↵}↵↵footer {↵  background: #000;↵}↵", ""]
i: ƒ (modules, mediaQuery)
toString: ƒ toString()

紧接着我们在之前的 rules 添加 style-loader。

{
  test: /\.css$/,
  use: [ "style-loader", "css-loader" ]
}

在浏览器打开我们的页面，可以看到，<head></head> 之间添加了之前定义的css内容。

<style type="text/css">
header {
  background: #fff;
}

footer {
  background: #000;
}
</style>

多个css文件的引入，最终打包成的一个css文件，并且引入标签引入。

FileLoader&UrlLoader

现在假如我们想在页面中引入一个

那么在配置文件中添加

/* webpack.config.js => rules */
{
  test: /\.jpe?g$/,
  use: ["url-loader"]
}

/* index.js */
import image from './webpack-logo.jpg';

console.log(image);

我们可以打印出来 base64 格式的图片数据：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAADaqADAAQAAAABAAAD3QAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/...

现在，如果我们想加载一个图片的话，把引用的 image 赋值给对应的 src 属性就可以了。不过这里我们可以看到一些问题，那就是，直接的图片引用转换成 base64 太大了。我引用的图片的大小是100kb，转换后还会大约增加1/3的体积，所以下面需要限制直接装换成 base64 图片的大小。回到 webpack.config.js:

{
  loader: "url-loader",
  options: {
    limit: 5000
  }
}

应用预设presets

我们的打包过程经常需要，根据不同的流程添加不同的插件，所以我们可以设置一个 loadPresets.js 来动态加载我们所需的 plugins 或 loader 等。

/* build-utils/loadPresets.js */
const webpackMerge = require("webpack-merge");

const applyPresets = (env = {presets: []}) => {
  const presets = env.presets || [];
  /** @type {string[]} */
  const mergedPresets = [].concat(...[presets]);
  const mergedConfigs = mergedPresets.map(presetName =>
    require(`./presets/webpack.${presetName}`)(env) // call the preset and pass env
  );

  return webpackMerge({}, ...mergedConfigs);
};

module.exports = applyPresets;

有了这个插件加载，配上我们的 npm scripts 就能很好的加载插件了:

{
  "prod": "npm run webpack -- --env.mode production",
  "prod:typescript": "npm run prod -- --env.presets typescript",
}

如上所示，我们需要，prod 的时候打包对应的 typescript 文件，这样的命令就能加载对应的组件。有了这个，我们可以根据需求，动态的加载所需的多种预设了。

添加打包分析插件

1	yarn add -D webpack-bundle-analyzer

{
  "prod": "npm run webpack -- --env.mode production",
  "prod:analyze": "npm run prod -- --env.presets analyze",
}

添加文件:

const WebpackBundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = () => ({
  plugins: [ new WebpackBundleAnalyzer() ]
})

SourceMaps

可以根据不同的环境，添加不同的 SourceMaps 到 presets ，这样，根据不同的开发目的（调试，正常开发，生产环境等），可以使用不同的 SouceMaps。

总结

webpack基础篇总结结束，后面会加上 webpack进阶篇。

可以到 https://github.com/webpack-contrib 找优秀的loader和plugins哦。

本文最后修改于: 2020-03-27.

本文标题：webpack 基础(四)：简单配置
本文作者：hddhyq
本文链接：https://hddhyq.github.io/2019/04/18/webpack基础4/
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

webpack 基础(四)：简单配置

分割开发环境配置文件

使用Webpack处理CSS

FileLoader&UrlLoader

应用预设presets

添加打包分析插件

SourceMaps

总结

评论

目录

最新评论

最新文章

分类

归档

标签

webpack 基础(四)： 简单配置

分割开发环境配置文件

使用Webpack处理CSS

FileLoader&UrlLoader

应用预设presets

添加打包分析插件

SourceMaps

总结

评论

目录

最新评论

最新文章

分类

归档

标签

webpack 基础(四)：简单配置