目的：平時小專案中例如一些**需要進行打包壓縮，用這個工具可以進行打包壓縮，就可以上傳到伺服器。
使用方法：
1，引進需要打包的專案，把入口html替換掉專案中的index.html，把引進的js，css都放在src裡面對應的資料夾裡面
2，npm install
3，進行webpack.config.js檔案的修改
1var path = require("path");
2 const htmlwebpackplugin = require('html-webpack-plugin');
3var config =,8//
出口檔案
9output: ,
13module: ,
21//
檔案使用 url-loader 來處理，小於8kb的直接轉為base6422,
29},30,
3640]41
}42],43
44},
45plugins:[
46new
htmlwebpackplugin()51]
52};
5354 module.exports = config;
4，在入口檔案引進（require）所需要打包的檔案，如
1 'use strict';2 require('../css/style.css');
5，刪除html的js和css引入路徑，因為打包完成後的js會自動注入打包過的html，執行npm run start，進行打包。
6，把dist檔案上傳到伺服器。
注意的問題：
因為webpack是按模組來打包的，也就是說經過打包的檔案**是被打包到乙個函式裡，此時你所有定義的變數或者方法已變成區域性的。所以如果打包後需要引用該函式的話，記得把函式定義在全域性，用window.fun = function(){}或者把函式寫在module.exports={}裡面。
工具現狀：
可以打包js檔案、css檔案、image、html，後續會繼續完善該工具。
webpack打包工具
終端執行 yarn webpack或者 在package.json中加入 scripts 開發模式 yarn webpack mode development原始模式 yarn webpack mode none在webpack.config.js中增加mode的模式 mode developmen...
Webpack打包工具詳解
webpack是一種前端資源構建工具 乙個靜態模組打包器 在webpack看來 前端所有資源檔案都會作為模組處理 他將根據模組的依賴關係進行靜態分析 打包生成對應的靜態資源 webpack 可以做到按需載入。像 grunt gulp 這類構建工具，打包的思路是 遍歷原始檔 匹配規則 打包，這個過程中...
webpack打包工具的使用
一 什麼是webpack?webpack是乙個模組打包工具。用vue專案來舉例 瀏覽器它是只認識js，不認識vue的。而我們寫的 字尾大多是.vue的，在每個.vue檔案中都可能html js css甚至是資源 並且由於元件化，這些.vue檔案之間還有錯綜複雜的關係。所以專案要被瀏覽器識別，我們就要...