webpack打包工具

webpack 3.8.1版本

webpack:

　　　　是一個前端資源加載或者打包工具。常見的資源有img css js json等
npm：

　　　　是資源管理工具。

首先新建文件夾第一步是執行終端指令：npm init.

第一步：下載　　

（工具是開發環境不是生產環境）

　　npm install -g webpack@3.8.1(全局下載不分生產跟開發，由於不在當前項目裏面，不用去指定)

　　

　　npm install webpack@3.8.1 --save-dev(局部下載)（也叫開發環境）（若是不加--save-dev默認是生產環境）。

　　

　[儘可能全局和局部都安裝]

第二步：

　　打包js文件：

指令，webpack  入口文件，出口文件

webpack js/a.js dist/bundle.js

而後來操做一下吧：

第1步建立文件：

 

第2步：分別在a,b,子模塊裏寫內容。

而後到終端對主文件進行打包，而後生成一個叫bundle.js的文件

最後在app.html文件裏引入bundle.js文件。

查看網頁就能夠看到內容：

可是每次執行的時候都須要webpack  入口文件，出口文件。這樣就很麻煩了爲了更方便咱們有了簡便的方法：

若是咱們只想使用webpack這個指令，就無缺打包須要配置webpack.config.js，指令就是簡單的webpack就能夠了。

如今來看一下怎麼配置文件：

首先咱們新建一個webpack.config.js的文件：，在文件裏面根據規則設定關係。

Webpack會有一個默認的配置文件叫webpack.config.js。就是在咱們的app1文件夾裏就會找有沒有webpack.config.js文件，若是有就會自動找到webpack.config.js文件而後運行裏面的代碼，經過裏面的關係進行轉換，裏面的關係是本身設定的，人家只提供規則，

規則一：是必須暴露接口：

有了這個包，咱們打包的時候只須要webpack就能夠了。簡化了咱們的打包操做。

但凡打包文件就只停留在被打包以前的文件，一旦更該就須要重新打包。

而後咱們來作一下css.

建立一個子文件a.css文件，在裏面設置樣式，

在主文件裏引入a.css文件

可是在打包文件的時候出現報錯，須要下載一些依賴包，才能把問題解決掉。

打包css文件須要 Loader依賴包
css轉成js      less 轉成js
json轉成js     png轉成js
而loader就解決這些問題了
css文件打包到js 文件中，須要css-loader style-loader

把loader包下載完成後

在webpack.config.js文件中依賴的包的規則。

而後在終端打包webpack就能夠了。

可是咱們發現，每次稍微改一下css就要webpack一下，這樣效率過低，可是又不敢寫多，寫多了又報錯，因此咱們就要添加熱加載。

第三步：

　　添加熱加載，熱加載就是，改完一個文件，咱們只要按住保存(ctrl+s)，而後就會自動刷新.

　　這裏就須要一個包，Webpack-dev-server@ 2.9.4

　　webpack-dev-server是一個輕量級的服務器，修改文件源碼後，自動刷新頁面將修改同步到頁面上。

　　這個包不能隨便下載，由於咱們使用的webpack是3.幾，可是要下載Webpack-dev-server就得是2.幾，但若是webpack是4.幾，對應的Webpack-dev-serve就得是3.幾（webpack的附屬產品要比webpack低一個版本）

全局安裝，

局部安裝，

下載完成後，咱們要到終端中啓動服務器，也可讓瀏覽器自動刷新

可是每一次敲一長串命令太麻煩，還有一種啓動命令是在項目根目錄的package.json文件scripts配置中添加配置，如：

而後咱們到終端輸入npm run dev啓動指令

 

咱們刷新網頁

這就要注意了，如今刷新頁面，是一個測試環節，存在一個虛擬服務器，

這樣刷新頁面，背景色就會變紅。

2019.6.4