Webpack5新特性尝鲜

目录

• 单独使用await
• 指定静态资源输出目录
• 真正的chunkId

上图截自github,截止目前2020.8.20日，Webpack5的开发进度到78%
使用Webpack5:

• 升级Node到8
• npm install webpack@next —save-dev
• npm install webpack-cli —save-dev
  

单独使用await

webpack5默认支持单独使用await,不需要和async配合使用 创建src/data.js:

const data = '外部数据'
export default data

创建src/index.js:

const dynmaic = await import('./data.js')
export const output = dynmaic.default + '🍊'  //外部数据🍊

或者index.js写成这样：

const dynmaic = import('./data.js')
export const output = (await dynmaic).default + '🍊'//外部数据🍊

创建webpack配置文件webpack.config.js:

module.exports = {
  experiments:{
    topLevelAwait:true,  //支持单独写await
  }
}

执行命令webpack --mode development,编译成功

使用webpack4则会报错：'Module parse failed: Cannot use keyword 'await' outside an async function'

指定静态资源输出目录

创建src/index.css:

body {
  background: url(./a.jpg);
}

修改index.js:

import './index.css'

webpack.config.js增加配置：

module.exports = {
  output:{
    assetModuleFilename:'images/[name].[hash:5][ext]'//指定静态资源输出目录
  },
  module:{
    rules:[
      {
        test:/\.(png|jpg|svg)$/i,
        type:'asset',
      },
      {
        test:/\.css$/i,
        use:['style-loader', 'css-loader']
      }
    ]
  },
  experiments:{
    topLevelAwait:true,  //支持单独写await
    asset:true //支持图片
  }
}

执行命令，打包后图片便可放在指定目录images：

真正的chunkId

修改index.js:

import("./async").then((_) => {
  console.log(_);
});

import("./data").then((_) => {
  console.log(_);
});

创建async.js:

const data2 = '异步数据'
export default data2

编译后结果如下：
可以看到每个动态引用的js都有自己真正的chunkId
webpack5可以在开发模式中启用了一个新命名的块 id 算法，该算法提供块(以及文件名)可读的引用。 模块 ID 由其相对于上下文的路径确定，而不是webpack4那样以0,1标志
❀参考链接：Webpack5.0 新特性尝鲜实战 🦀🦀