Webpack入門

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 

執行結果如下

結果分析

1.Hash

用於緩存機制，即每次編譯會根據文件生成一個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'