webpack chunk(webpack5)
本文主要从最新的webpack4开始,慢慢学习webpack的相关知识点并进行总结。
第一次轻触
Webpack官方网站地址github地址
使用webpack先决条件
环境准备
-`node,就用最新的官方版本。因为这里的webpack使用了4,不再支持节点v4以下的版本,所以节点需要安装V4版本。这是因为新的webpack和外接程序使用了es6的语法,并且es6没有v4版本,所以不会提供。
00-1010 webpack的最新版本是:v4.43.0
要安装最新版本或特定版本,请运行以下命令之一://需要在此处安装webpack-cli。要给出webpack4或更高版本的官方版本,您需要使用` Webpack-CLI ` cnpminstall-save-dev Webpack Webpack-CLI//yarnad-d Webpack webpack-clicnpm install-save-dev web pack @ version Cool motor在本地安装web pack后,您可以从node_modules/访问其版本的“奋斗纸鹤”。奋斗纸鹤/网络包。使用。/node_modules/。挣扎着运行纸鹤/网络包。因为您仍然需要访问node_modules,在这里,我们使用linux命令来指定运行web pack Alias web pack=' node _ modules/'的别名。苦苦挣扎的纸鹤/webpack的窗口可以临时放入环境变量中,以全局安装以下NPM安装方法,这将使webpack在全局环境中可用:cnpm install - global webpack不建议全局安装web pack。这将把项目中的webpack锁定到指定的版本,而在使用不同版本webpack的项目中,这可能会导致构造失败。运行一个小例子来感受它。
src/index.js
从“”导入栏。/bar ';
bar();
src/bar.js
导出默认功能栏(){ 0
//
}
webpack.config.js
const path=require(' path ');
module.exports={
入口:’。/src/index.js ',
输出: {
path : path . resolve(_ dirname,' dist '),
filename: 'bundle.js '
}
};
page.html
!声明文档类型
超文本标记语言
头
.
/head
身体
.
脚本src=' dist/bundle . js '/脚本
/body
/html
然后在命令行上运行webpack将创建bundle.js
版本:网络包4.43.0
时间: 82毫秒
建于2020年6月22日下午5:20:25
资产大小区块区块名称
bundle.js 951字节0[发出] main
Entrypoint main=bundle.js
[0] ./src/index.js 1模块72字节{ 0 }[已构建]
| ./src/index.js 32字节[已构建]
| ./src/bar.js 40字节[已构建]
//此处将报告警告。它是在webpack4之后添加的“开发”、“生产”和“无”环境变量的名称。既然是官方推荐,我们可以添加。
//./node_modules/。挣扎中的纸鹤/纸包模式生产
配置中的警告
尚未设置“模式”选项,对于此值,webpack将回退到“生产”。将“模式”选项设置为“开发”或“生产”,为每个环境启用默认值。
您也可以将其设置为“无”以禁用任何默认行为。了解更多: https://webpack.js.org/configuration/mode/
官方教程