webpack基礎配置

（1）安裝webpack

    首先建立一個目錄，好比demo，而後使用npm初始化配置

npm init

   接下來填好選項後，完成後會在demo目錄下生成一個package.json的文件。輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。

  

（2）接下來在本地局部安裝webpack。package.json文件已經就緒，接下來在本項目中安裝Webpack做爲依賴包

npm install webpack --save-dev

  --save-dev會做爲開發依賴來安裝webpack。安裝成功後，在package.json中會多出一項配置：

"devDependencies":{
    "webpack":"^2.3.2"
}

接着須要安裝webpack-dev-server，能夠在開發環境提供不少服務。好比啓動服務器、熱更新、接口代理等，配置起來也很簡單。一樣，在本地局部安裝：

npm install webpack-dev-server --save-dev

    ②除了上述方法外，還能夠如今 npm 配置文件 package.json 文件的script中添加一個快速啓動 webpack-dev-server服務的腳本，

    

    執行時運行 npm run dev 命令，就會執行腳本中dev字段的命令，其中，--open指的是運行命令後，自動打開瀏覽器，--config指讀取配置文件的路徑。webpack的項目中，webpack配置一般都命名爲webpack.config.js, 並存放在build文件夾下。

  固然若是區分開發版本和正式版本，常區分命名webpack.dev.conf.js 和 webpack.prod.conf.js, 一般還會有一個webpack.base.conf.js用來配置兩個版本相同配置，而後經過import和merge形式添加到各自版本中

  對於腳本中的配置，除了 --open 不少 --config以外，還有幾個經常使用的一塊兒在這裏總結。

• --open: 在執行命令是自動在瀏覽器打開頁面
• --config: 指明讀取的配置文件的路徑
• --progress: 在控制檯打印編譯過程信息
• --host: 指明執行的IP地址，默認是 127.0.0.1，也就是 localhost
• --port: 指明執行時啓用的端口號
• --watch: 根據構建是獲得的依賴關係，對項目所依賴的全部文件進行監聽，發生改變即從新構建（該功能如今通常使用webpack-dev-server自動刷新機制和熱替換HMR機制替代）
• --hide-modules: 執行編譯時不將webpack模塊內容添加到編譯輸出文件中

     安裝完成後，最終的文件內容。

      

（3）本質js文件
    webpack就是一個.js配置文件，你的架構好或者差都體如今這個配置裏，隨着需求的不斷出現，工程配置也是逐漸完善的。由淺入深，一步步來支持更多的功能。

    首先在demo目錄下建立一個js文件：webpack.config.js，並初始化它的內容。

var config={

};
module.exports = config;

  這裏的module.exports = config；至關於export default config；因爲目前尚未安裝支持ES6編譯插件，因此不能直接使用ES6的語法，不然會報錯。

（4）添加啓動腳本，安裝webpack-dev-server服務

    在 npm 配置文件 package.json 文件的script中添加一個快速啓動 webpack-dev-server服務的腳本

{
  "scripts": {
    "test": "echo \"Error: on test specified\" && exit 1 ",
    "dev": "webpack-dev-server --open --config build/webpack.config.js" 
  }
}

  當運行npm run dev時，就會執行webpack-dev-server --open --config build/webpack.config.js命令，其中--config是指向webpack-dev-server讀取的配置文件路徑，這裏讀取咱們在上一步建立的webpack.config.js文件。--open會在執行命令時自動在瀏覽器打開頁面，默認地址是127.0.0.1:8000，不過ip和端口都是能夠配置的。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --host 172.172.172.1 --prop 8888 --open --config build/webpack.config.js"
  },

    這樣訪問地址就改成了172.172.172.1:8888,。通常在局域網下，須要讓其餘同事訪問時能夠這樣配置，不然用默認的127.0.0.1（localhost）便可。

（5）入口和出口

    webpack配置中最重要的也是必選的兩項是入口（Entry）和出口（Output）。入口的做用是告訴webpack從哪裏開始尋找依賴，而且編譯。出口則是用來配置編譯後的文件存儲位置和文件名。

    在demo下新建一個空的main.js做爲入口的文件，而後在webpack.config.js中進行入口和輸出的配置。

 

 

 

 

 

 

 

 

 

 

.