webpack的安裝與使用（單文件）

　　在安裝 Webpack 前，你本地環境必須已安裝nodejs。

　　可使用npm安裝，固然因爲 npm 安裝速度慢，也可使用淘寶的鏡像及其命令cnpm（npm install -g cnpm --registry=https://registry.npm.taobao.org），安裝使用介紹參照：使用淘寶 NPM 鏡像。

　　使用 cnpm 安裝 webpack：

　　cnpm install webpack -g

　　安裝完後，咱們能夠在本地建立一個目錄如project。命令：mkdir project

　　在project目錄下建立一個index.js文件，代碼以下：

　　document.write("Hello world!")

　　而後在project文件夾下建立index.html文件。代碼以下：

　　

　　而後就可使用webpack命令來打包了。因爲個人project是安裝在桌面，所以個人操做是：

　　

　　執行以上命令會編譯 index.js 文件並生成myScript.js 文件，成功後輸出信息以下所示：

　　

　　在瀏覽器中打開index.html文件，結果以下：

　　

　　下面來建立另外一個js文件。index2.js文件代碼以下：

　　module.exports = "Nothing is impossible！"

　　更新index.js文件以下：

　　document.write(require("./index2.js"));

　　接下來用webpack命令來打包：

　　webpack index.js myScript.js

　　完成後，在瀏覽器中打開index.html文件，結果以下：

　　

　　在頁面啓動時，會先執行index.js文件中的代碼，其餘模塊會在運行require的時候再執行。

　　

　　Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

　　因此若是咱們須要在應用中添加 css 文件，就須要使用到 css-loader 和 style-loader，他們作兩件不一樣的事情，css-loader 會遍歷 CSS 文件，而後找到 url() 表達式而後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中。

　　接下來咱們使用如下命令來安裝 css-loader 和 style-loader(全局安裝須要參數 -g)。

　　cnpm install style-loader css-loader  （注意是在要運行的js所在的目錄環境下安裝。也能夠選擇全局安裝，慚愧，我沒成功過）

　　執行以上命令後，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。

　　接下來建立一個 index.css 文件，代碼以下：

　　

　　而後修改index.js中的文件，代碼以下：

　　

　　接下來使用webpack來打包：

　　webpack index.js myScript.js

　　完成後，在瀏覽器中打開index.html文件，結果以下：

　　

　　require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!

 

　　前面說的相對簡單些，這裏要說的稍微複雜一點的。

　　假如css文件存放在style文件夾中，而js文件存放在js文件中呢？這樣使用webpack來打包又該如何操做呢？例如此刻個人目錄結構是這樣的。

　　

　　此時咱們須要改兩個地方，其一，將index.js文件中的代碼改成：

　　

　　而後將index.html加載的js文件的那部分改成：

　　

　　而後使用webpack來打包。命令以下：

　　

　　此時，在瀏覽器中打開index.html文件，結果以下：

　　

 　　補充：

　　如：webpack index.js myScript.js -p 表示將打包後的文件進行壓縮

　　如：webpack index.js myScript.js -w 提供watch方法；實時進行打包更新，即保存後，再刷新頁面便可能夠看到代碼生效了，無需從新運行webpack