webpack安裝與命令列

標籤：運行   loader   全域   dev   log   http   htm   效果   變數   

我們常規直接使用 npm 的形式來安裝：

npm install webpack -g    將webpack安裝到全域變數

然後建立個檔案夾，如webpack-test，通過終端進入該檔案夾，

npm init   初始化package.json  會出現設定json檔案到一些設定項，不用填，一路斷行符號就行

完成後會在webpack-test檔案夾裡產生一個package.json檔案

npm install grunt --save-dev 在該檔案夾下安裝webpack

這時在webpack-test檔案夾下會多出個node_modules檔案夾，package.json檔案也發生了變化

 這時可以在webpack-test檔案夾建立個hello.js,在終端裡運行 webpack hello.js hello.bundle.js  就能在檔案夾裡多出個編譯後的js

再重建立個word.js，再hello.js中加入   require("./word.js");   可以把word.js注入進來，這時候再運行webpack hello.js hello.bundle.js。會發現bundle.js裡會發生變化，加入了word.js裡的內容

 

也可以通過這種方式引入css檔案，建立一個style.js,通過require注入到hello.js中，運行webpack hello.js hello.bundle.js 

此時會發現報錯

因為此時沒有style和css外掛程式，通過npm install css-loader style-loader --save-dev 安裝css和style外掛程式

然後在hello.js中注入css-loader和style-loader 

建立一個html檔案， 引入hello.bundle.js，終端中運行webpack hello.js hello.bundle.js 即可

可以看到bundle.js檔案中已經加入了寫的樣式

頁面中也可以看到了效果。

 

還可以通過webpack的 --module-bind 命令來注入css-loader和style-loader ，這時可以去掉js中的"style-loader!css-loader"

webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘

為了可以更方便些，不用每次更改代碼都重新構建下，可以用--watch命令來監聽檔案的變化，檔案一有變化，bundle。js就會改變

webpack安裝與命令列