2018.06.06 17:41

Webpack 4教程:从0 Conf到生产模式您需要知道的所有内容

webpack团队正在努力研究下一代流行的模块打包程序webpack 4

以下文章是对webpack 4的一个生动的呼吸介绍。一旦有新信息发布,我会尽快更新。请继续关注我的博客以获取更多信息!

webpack 4作为零配置模块捆绑器

webpack功能强大,有很多独特的功能,但其中一个难点是配置文件


为中型到大型项目提供webpack的配置并不是什么大问题。你不能没有一个人。然而,对于较小的玩家来说,这很烦人,特别是当你想要启动一些玩具应用时。

这就是为什么Parcel获得了很多吸引力

Sean和webpack团队将改变:webpack 4默认不需要配置文件

让我们试试看。

创建一个新目录并进入它:

mkdir webpack-4-quickstart && cd $ _

运行以下命令来初始化package.json:

npm init -y

现在让我们拉动webpack 4。

npm我webpack --save-dev

我们还需要webpack-cli,它作为一个独立的包提供:

npm我webpack-cli --save-dev

现在打开package.json并添加一个构建脚本:

scripts”:{ build”:“webpack” 
}

关闭文件并保存。

尝试运行:

npm运行构建

看看会发生什么:

未找到输入模块中的错误:错误:无法解析'〜/ webpack-4-quickstart'中的'./src'

的WebPack 4寻找切入点  ./src!如果你不知道这意味着什么去看看我以前的文章从Gulp切换到webpack

简而言之:入口点是webpack寻找开始构建Javascript包的文件。

在之前的webpack版本中,入口点必须在名为webpack.config.js的配置文件中定义。

但是从webpack 4开始,不需要定义入口点:它会将  ./src/index.js作为默认值!

测试新功能非常简单。创建  ./src/index.js

console.log(`我是一个愚蠢的antry点`);

并再次运行构建:

npm运行构建

你会得到这个包~/webpack-4-quickstart/dist/main.js

什么?稍等片刻。没有必要定义输出文件?究竟。

webpack 4中,不需要定义入口点和输出文件

我知道很多人并不那么激动。Webpack的主要优势是代码拆分。但相信我,使用零配置工具可以加快速度。

所以这是第一条新闻:webpack 4不需要配置文件

它会查找  ./src/index.js作为默认入口点。而且,它会在./dist/main.js中吐出这个包  。

在下一节中,我们将看到webpack 4的另一个很好的功能:生产和开发模式

webpack 4:生产和开发模式

拥有2个配置文件是webpack中的常见模式。

一个典型的项目可能有:

  • 一个用于开发配置文件,用于定义webpack dev服务器和其他东西
  • 用于生产配置文件,用于定义UglifyJSPlugin,源地图等

虽然更大的项目可能仍然需要2个文件,但是在webpack 4中,您可以无需任何配置。

怎么会这样?

webpack 4引入了生产开发模式。

事实上,如果你注意输出npm run build你会看到一个很好的警告:

'模式'选项尚未设置。将'模式'选项设置为'开发'或'生产'以启用此环境的默认值。

那是什么意思?让我们来看看。

打开package.json并填入脚本部分,如下所示:

“scripts”:{ 
    “dev”:“webpack --mode development”,
    “build”:“webpack --mode production” 
  }

现在尝试运行:

npm运行开发

并看看  ./dist/main.js。你看到了什么?是的,我知道,一个无聊的包...没有缩小!

现在尝试运行:

npm运行构建

并看看  ./dist/main.js。你现在看到什么?一个缩小的包

是!

生产模式可以实现各种优化。包括缩小,范围提升,翻树等等。

另一方面,开发模式针对速度进行了优化,只不过是提供未缩小的捆绑包。

下面是第二条新闻:webpack 4引入了生产开发模式。

在webpack 4中,你可以不用一行配置!只需定义--mode旗帜,你就可以免费获得一切!

敬请关注!更多即将推出…

这是一个生动的,呼吸介绍webpack 4.请继续关注我的博客更多!

webpack 4:资源

本教程的Github回购=> webpack-4-quickstart


我知道已经有一个很棒的webpack列表,但这里是我的:关于webpack 4 => awesome-webpack-4的真棒资源列表

DIY表情

(添加http或https协议)

提交评论

留言区 1