webpack就是乙個打包工具（靜態資源打包工具） 前端必備
js依賴進行整合處理 （打包整合）
一些預處理的sass，less可以在環境中進行編譯 **換）
可以對js、html、等進行壓縮 （優化）
entry 入口檔案 // 好比main.js
output 出口檔案 // 好比dist 打包之後的資料夾
plugin 外掛程式 // 自動生成html檔案等外掛程式
loader 轉換器 // sass less 轉換成我們想要的檔案型別
dev-serve 伺服器 // 使我們webpack在本地執行 服務
mode 模式 // 可以切換開發環境 和 生成環境
確認 當前環境有沒有 webpack 使用webpack -v檢測版本號 如果沒有webpack 就使用
cnpm install webpack -g在想要成為 打包檔案的資料夾中，使用 npm init -y 初始化乙個package.json
建立乙個src，src下面建立乙個index.html ,裡面加乙個div div隨便起乙個 id root名字，讓引入bundle.js
src 中建立乙個 main.js 作為主要開發檔案，在裡面進行dom操作，操作html中的root div
打包 使用webpack src/main.js --output src/bundle.js
每次打包** 都打包這麼長 就很浪費時間 可以去配置一下
建立乙個webpack.config.js
const path =
require
("path"
) module.exports =
}
建立本地伺服器 cnpm i webpack-dev-server -d
//在package.json 中寫
"scripts"
:,
npm run dev 就可以正常執行了
在webpack.config.js 配置 規則
module:
]}
引入
const htmlwebpackplugin =
require
("html-webpack-plugin"
) 配置
// 外掛程式
plugins:
[new
htmlwebpackplugin()
],```
配置完之後 執行即可, index.html 模板拿到和src同級
webpack 編譯過程
webpack 的作用是將源 編譯 構建 打包 成最終 整個過程大致分為三個步驟 初始化編譯輸出 此階段，webpack會將cli引數 配置檔案 預設配置進行融合，形成乙個最終的配置物件。對配置的處理過程是依託乙個第三方庫yargs完成的 此階段相對比較簡單，主要是為接下來的編譯階段做必要的準備 目...
webpack搭建vue環境
npm init y cnpm i webpack webpack cli dcnpm i webpack dev server dcnpm i vue scnpm i html webpack plugin d建立src index.html src main.js webpack.config....
webpack 搭建 React 專案
根據官方文件上面說 你的機器上安裝的 node 8.10 和 npm 5.6 1 所以第一步檢查自己的 node 版本 2 根據官方文件上說的，直接執行下面三句話，建立 react 專案並執行 npm start 但是也許你在執行者三句話時，會出現一些錯誤 然後再執行上面的命令，也就是 切記建立檔案...