Webpack4 一、入门

1.创建一个项目

mkdir webpack-demo   //新建项目文件夹
cd webpack-demo
npm init -y          //利用npm初始化项目，生成package.json文件

此时项目机构如下

webpack-demo
- package.json

2.安装webpack

使用npm进行安装

npm install webpack webpack-cli --save-dev

3.Code

vi hello.js					 //新建js文件
vi print.js					 //用于被引用

print.js

print.jsexport default function printMe() {
    console.log('I get called from print.js!');
}

hello.js

import printMe from './print.js';
function hello(str) {
    printMe()
    alert(str)
}

此时项目机构如下

webpack-demo
- hello.js
- print.js
- package.json
- package-lock.json

##4.打包

npx webpack hello.js

此时未指定输出文件的名字，默认是main.js

执行结果如下

在这里插入图片描述
结果分析

1.Hash

扫描二维码关注公众号，回复： 5689677 查看本文章

用于缓存机制，即每次编译会根据文件生成一个hash值，一旦hash发生变化浏览器会重新下载所有文件

这里的hash是每次编译时所计算出来的一个值，因此当任何一个文件修改，hash都将会改变，而且所打包出来的文件名也将不一样了，这样对于需频繁发布的项目不是很友好，会造成每次有新版本，用户浏览器都将重新下载所有的文件，为了避免这种情况，webpack还提供了chunkhash

（注：这里提取出的css文件hash值不一样，是因为使用的是extract-text-webpack-plugin插件，它提供了自己的一个contenhash，也是对于css文件建议的一种用法，保证了css有自己独立的hash，不会受到js文件的干扰）

参考：https://github.com/kaola-fed/blog/issues/37

Version	当前打包webpack的版本	含义
Version	webpack 4.29.6	当前打包webpack的版本
Time	265ms	本次打包时间
Built at	03/22/2019 9:38:25 AM	构建时间
Asset	main.js	指构建后输出的资源文件，名称由filename的配置决定，如可能是`[name].[hash].js`这样子
Size	930 bytes	指构建后输出的资源文件的大小
Chunks	0	构建块编号
[emitted]	[emitted]	指文件被输出
Chunk Names	main	指这个构建块的名称，即各个chunk块输出期间chunk块名称
Entrypoint	main = main.js	入口节点

[0] ./hello.js + 2 modules 309 bytes {0} [built]  //入口文件以及依赖模块
    | ./hello.js 134 bytes [built]
    | ./print.js 86 bytes [built]
    | ./print1.js 89 bytes [built]

注：

1.npx即用于执行项目内安装的模块

2.webpack不指定打包文件时默认执行./src下的index文件，即若执行npx webpack则会如下报错,即找不到入口文件

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: efe83611fe46d3fa6fbc
Version: webpack 4.29.6
Time: 44ms
Built at: 03/22/2019 9:18:56 AM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/ocean/Documents/workspace/ui/webpack-demo/webpack0-test'

1.创建一个项目

2.安装webpack

3.Code

猜你喜欢