1割按、創(chuàng)建一個webpack-test文件夾
2、npm init 初始化npm
3埃唯、使用opensub package.json 查看package文件是否正確
4琢蛤、npm i webpack --save-dev 安裝webpack
5、安裝完webpac
6蜂嗽、opensub ./ 指令表示使用sublime打開當(dāng)前文件夾目錄
7苗膝、創(chuàng)建一個hello.js
輸入
function hello(str){
console.log(str);
}
8、在控制臺執(zhí)行命令webpack hello.js hello.bundle.js 可以看到該文件目錄下生成了一個hello.bundle.js文件
ps：如果控制臺提示找不到webpack指令需要npm i -g webpack 全局安裝一下webpack指令
9植旧、webpack打包成功時命令臺輸出如下
其中
Asset是生成的文件名稱
Size是文件大小
Chunks文件塊
Chunk Names文件塊名稱
10辱揭、新建一個hello2.js并在word.js里面引入代碼如下
require('./word.js');
function hello(str){
console.log(str);
}
11、重新執(zhí)行webpack hello.js hello.bundle.js控制臺輸出的文件塊會有兩個
12病附、新建一個style.css文件并在hello.js里面引入
重新執(zhí)行代碼時會報錯问窃，這是因為webpack并不能直接打包css文件類型
此時需要安裝兩個庫
13、npm i css-loader style-loader --save-dev
14完沪、安裝完成之后在hello.js中重新引用域庇。引入方法如下
require('style-loader!css-loader!./style.css');
此時重新打包即可成功
15、新建一個index.html文件在文件底部引入hello.bundle.js
16丽焊、在hello.js底部輸入hello('hello world');并在style.css里面輸入body{backgroud：lightblue;}
17较剃、重新打包文件即可看到頁面中的效果
css-loader使得webpack可以打包css
style-loader是將打包的css代碼插入到html中的header標(biāo)簽里面
18、為了避免每次打包都要輸入style-loader技健！css-loader写穴！的麻煩可以使用webpack的命令行
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
19、為了在每次更新代碼的時候自動打包可以將命令行改為
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
這樣每次更改代碼的時候可以自動看到更改的效果
20雌贱、一些命令行的意義
--progress可以看到短暫的打包進(jìn)度條
--display-modules可以將使用的模塊展示出來
--display-reasons告訴你為什么打包某些模塊的原因
