webpack配置详细注释

作者: lemonzoey | 来源:发表于2018-04-12 20:05 被阅读0次

刚看了官网的webpack例子，跟着做了一遍，把相关的配置用法注释了一遍，另外把我在配置中遇到的问题也分享出来。。。

一.webpack的配置详细注释

const config = {
    //入口文件配置
    entry:{
        mian:'./src/index.js',
        // print:'./src/print.js'
        vendor:['lodash']
    },
    //配置出口文件
    output:{
        //出口文件的名称
        filename:'[name].bundle.js',
        //出口文件的路径
        path:path.resolve(__dirname,'dist'),
        //publicPath 也会在服务器脚本用到，以确保文件资源能够在 http://localhost:3000 下正确访问
        publicPath:'/'
        
    },
    mode:'none',
    module:{
        //匹配除开js之外其他的文件，让相应的loader将文件解析成js文件
        rules:[
          {
              test:/\.css$/,
             //将 loaders 应用于最少数的必要模块中
              //使用 include 字段仅将 loader 模块应用在实际需要用其转换的位置中：
              include: path.resolve(__dirname, "src"),
              use:['style-loader','css-loader']
          },
          {
              test:/\.xml$/,
              use:'xml-loader'
          }
        ]
    },
    //追踪错误来源，若不配置，错误会在bundle.js中，不好找错误
    devtool:'inline-source-map',
    //配置插件，完成loader无法完成的功能
    plugins: [
       //离线任务未完成，报错：TypeError: WorkboxPlugin is not a constructor，原因待查
        // new WorkboxPlugin({
        //  // 这些选项帮助 ServiceWorkers 快速启用
        //  // 不允许遗留任何“旧的” ServiceWorkers
        //    clientsClaim: true,
        //    skipWaiting: true
        // }),
       //RuntimeChunkPlugin 的 'vendor' 实例，必须在 'common' 实例之前引入。
        new webpack.optimize.RuntimeChunkPlugin({
            name: "vendor"
        }),
        new webpack.optimize.RuntimeChunkPlugin({
            name: "common"
        }),
        /*
          自动生成html,及文件的引用
          html-webpack-plugin用来打包入口html文件
          entry配置的入口是js文件, webpack以js文件为入口, 遇到import, 用配置的loader加载引入文件
          但作为浏览器打开的入口html, 是引用入口js的文件, 它在整个编译过程的外面,
          所以, 我们需要html-webpack-plugin来打包作为入口的html文件
        */
        new HtmlWebpackPlugin({
        title: '柠檬🍋'
        }),
        //每次打包前会将dist文件夹中的文件清除，防止加载不必要的文件
        new CleanWebpackPlugin(['dist']),
        // webpack 内置的 HMR 插件
        new webpack.HotModuleReplacementPlugin(),
        //查看要修补(patch)的依赖
        new webpack.NamedModulesPlugin(),
        //删除未引用代码(dead code)的压缩工具(minifier)
        new UglifyJSPlugin(),
      //HashedModuleIdsPlugin，推荐用于生产环境构建：使用这个可以实现缓存，那些没有改变的文件就不会
        //随着每次构建而改变了，节约资源
        new webpack.HashedModuleIdsPlugin(),
    ],
    //webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载,devServer启动的就是webpack-dev-server
    //以下配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
    devServer:{
        //告诉开发服务器(dev server)，在哪里查找文件：
        contentBase:'./dist',
        port:'3333',
        //启动热重载
        hot:true 
    }
    
}
module.exports = config

二.配置过程中遇到的问题

1.error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

查了资料发现，webpack 4.0.0-beta.0删除了 CommonsChunkPlugin，以支持两个新的选项（optimization.splitChunks 和 optimization.runtimeChunk）。

从webpack 4.0.0-beta.0 开始分割 Chunk 将不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置项，具体的实现原理可以参考 CommonsChunkPlugin。

对于那些需要细粒度控制缓存策略的人，可以通过 optimization.splitChunks和 optimization.runtimeChunk。现在可以使用 module.rules[].resolve来配置解析。它与全局配置合并。

删掉 new webpack.optimize.CommonsChunkPlugin({
           name: 'common' // 指定公共 bundle 的名称。
       }),
改用  new webpack.optimize.RuntimeChunkPlugin({
           name: "common" // 指定公共 bundle 的名称
       }),

optimization的配置介绍如下：

//这里有两种使用方式：
const config= {
     //方式一：
     optimization:{...}
     //方式二：
     plugins: [
         new webpack.optimize.SplitChunksPlugin({...})
     ]
}

optimization参数介绍：

optimization: {
     runtimeChunk: {
        name: "manifest"        //指定公共 bundle 的名称
    },
    splitChunks: {
      chunks: "initial",         // 必须三选一： "initial" | "all"(默认就是all) | "async"
      minSize: 0,                // 最小尺寸，默认0
      minChunks: 1,              // 最小 chunk ，默认1
      maxAsyncRequests: 1,       // 最大异步请求数， 默认1
      maxInitialRequests: 1,    // 最大初始化请求书，默认1
      name: () => {},              // 名称，此选项可接收 function
      cacheGroups: {                 // 这里开始设置缓存的 chunks
        priority: "0",                // 缓存组优先级 false | object |
        vendor: {                   // key 为entry中定义的 入口名称
          chunks: "initial",        // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
          name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
          minSize: 0,
          minChunks: 1,
          enforce: true,
          maxAsyncRequests: 1,       // 最大异步请求数， 默认1
          maxInitialRequests: 1,    // 最大初始化请求书，默认1
          reuseExistingChunk: true   // 可设置是否重用该chunk（查看源码没有发现默认值）
        }
      }
    }
  },

2.filename: '[name].[chunkhash].js',
dev环境时候报错：Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js' (use [hash] instead)
prod环境时候都可以用。
这里[chunkhash]与[hash]的区别：
chunkhash会给每个出口文件每次生成不一样的hash名字

Built at: 2018-4-13 16:34:23
                             Asset       Size  Chunks             Chunk Names
      main.3d547e36b08c284ce1a2.js   76.1 KiB       0  [emitted]  main
    vendor.3e5be7d4aebfd3b7d5dd.js   69.4 KiB       1  [emitted]  vendor
    common.38541d717f3e409861be.js   1.09 KiB       2  [emitted]  common

hash则每次给所有出口文件生成不一样的名字，但是所有出口文件的hash名字一样

Built at: 2018-4-13 16:33:22
                             Asset       Size  Chunks             Chunk Names
      main.5af0edc63954761b5bc3.js   76.1 KiB       0  [emitted]  main
    vendor.5af0edc63954761b5bc3.js   69.4 KiB       1  [emitted]  vendor
    common.5af0edc63954761b5bc3.js   1.09 KiB       2  [emitted]  common

bundle 的名称是它内容（通过 hash）的映射。如果我们不做修改，然后再次运行构建，我们以为文件名会保持不变。然而，如果我们真的运行，可能会发现情况并非如此：（译注：这里的意思是，如果不做修改，文件名可能会变，也可能不会。）

三.性能优化

避免在生产环境下才会用到的工具，也就是说不要在开发环境下用这些插件。
某些实用工具， plugins 和 loaders 都只能在构建生产环境时才有用。例如，在开发时使用 UglifyJsPlugin 来压缩和修改代码是没有意义的。以下这些工具在开发中通常被排除在外:

UglifyJsPlugin
ExtractTextPlugin
[hash]/[chunkhash]
AggressiveSplittingPlugin
AggressiveMergingPlugin
ModuleConcatenationPlugin

四.在构建项目时设置路径值

在开发模式中，我们通常有一个 assets/ 文件夹，它往往存放在和首页一个级别的目录下。这样是挺方便；但是如果在生产环境下，你想把这些静态文件统一使用CDN加载，那该怎么办？

想要解决这个问题，你可以使用有着悠久历史的环境变量。比如说，我们设置了一个名为 ASSET_PATH 的变量：

import webpack from 'webpack';

// 如果预先定义过环境变量，就将其赋值给`ASSET_PATH`变量，否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';

export default {
  output: {
    publicPath: ASSET_PATH
  },

  plugins: [
    // 该插件帮助我们安心地使用环境变量
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ]
};

五. DefinePlugin的用法

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

new webpack.DefinePlugin({
  // Definitions...
})

用法

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

如果这个值是一个字符串，它会被当作一个代码片段来使用。
如果这个值不是字符串，它会被转化为字符串(包括函数)。
如果这个值是一个对象，它所有的 key 会被同样的方式定义。
如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

T> 注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 '"production"', 或者使用 JSON.stringify('production')。

index.js

if (!PRODUCTION) {
  console.log('Debug info')
}

if (PRODUCTION) {
  console.log('Production log')
}

通过没有使用压缩的 webpack 的结果：

if (!true) {
  console.log('Debug info')
}
if (true) {
  console.log('Production log')
}

通过使用压缩的 webpack 的结果:

console.log('Production log')

功能标记(Feature Flags)

使用功能标记来「启用/禁用」「生产/开发」构建中的功能。

new webpack.DefinePlugin({
  'NICE_FEATURE': JSON.stringify(true),
  'EXPERIMENTAL_FEATURE': JSON.stringify(false)
})

W> When defining values for process prefer 'process.env.NODE_ENV': JSON.stringify('production') over process: { env: { NODE_ENV: JSON.stringify('production') } }. Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.

服务 URL(Service URLs)

在「生产/开发」构建中使用不同的服务 URL(Service URLs)：

new webpack.DefinePlugin({
  'SERVICE_URL': JSON.stringify("http://dev.example.com")
})

六.github地址

github地址😊

webpack配置详细注释

一.webpack的配置详细注释

二.配置过程中遇到的问题

三.性能优化

四.在构建项目时设置路径值

五. DefinePlugin的用法

用法

功能标记(Feature Flags)

服务 URL(Service URLs)

六.github地址

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程