開始步驟
1、建立乙個專案 在空專案中執行 npm init -y 快速初始化乙個包管理檔案
2、自動建立出乙個 package.json
3、建立乙個src原**目錄
4、src建立乙個index.html 裡面寫**結構
5、執行 npm i jquery -s 安裝jq
6、src目錄下建立乙個index.js 檔案 通過 import $ from 『jquery』 匯入jq
7、index.html 引入jq.js
此時 執行**的時候 並沒有出現我們想要的結果 原因是 es6語法不支援，報錯 所以需要使用webpack打包工具
安裝配置 webpack
1、執行 npm install webpack webpack-cli -d ,安裝webpack相關的包
在這了我使用npm的時候一直報錯，所以採用了cnpm 安裝成功了
2、在專案根目錄建立名為webpack.config.js 的 webpack 配置檔案
3、在webpack 配置檔案中，初始化如下基本配置
module.exports ="scripts":6、index.html 引入打包成功後的 dist/main.js
webpack 基礎使用
1、配置打包的入口出口
//webpack 的4.x版本中預設約定
//打包的入口檔案為 src--> index.js
//打包的出口檔案為 src--> main.js
//如果要手動修改打包的入出口檔案，可在webpack.config.js中新增配置資訊
const path = require('path') // 匯入node.js 中專門操作路徑的模組
module.exports =
}
webpack 自動打包功能（為了每次修改完**自動生效）
執行 npm install webpack-dev-server -d 命令，安裝支援專案自動打包的工具
修改 package.json 配置檔案中 scripts 的 dev 命令如下：
"scripts":通過 http://localhost:8080/bundle.js 看
執行 npm run dev命令，重新打包
瀏覽器訪問 http://localhost:8080 位址，檢視自動打包效果
ctrl + c 停止專案 cls 清空控制台(一些小命令)
webpack 配置生成預覽頁面
配置 html-webpack-plugin 生成預覽頁面
1、執行 npm install html-webpack-plugin -d ,安裝生成預覽頁面的外掛程式
2、修改 webpack.congig.js 檔案頭部區域，新增如下配置：
//匯入生成預覽頁面的外掛程式，得到乙個建構函式
const htmlwebpackplugin = require('html-webpack-plugin')
const htmlplugin = new htmlwebpackplugin()
module.exports =中的配置
// --open 打包後自動開啟瀏覽器頁面
// --host 配置ip位址
// --port 配置埠
"scripts":
loader載入器 可以協助webpack 打包處理特定的檔案模組，如
less-loader 可以打包處理 .less相關的檔案
sass-loader 可以打包處理 .scss相關的檔案
url-loader 可以打包處理 .css中與 url 路徑相關的檔案
2、loader的呼叫過程
3、webpack中載入器的基本使用
執行npm i style-loader css-loader -d 命令，安裝處理css檔案的loader
在webpack.config.js 的module–>rules 素組中，新增loader規則如下：
//所有第三方檔案模組的匹配規則
module: ]}
所有第三方檔案模組的匹配規則
module: ]}
3.在index.js 匯入index.less樣式表所有第三方檔案模組的匹配規則
module:
]}
const autoprefixer = require('autoprefixer') // 匯入自動新增字首的外掛程式
module.exports =
//所有第三方檔案模組的匹配規則
module: ]}
所有第三方檔案模組的匹配規則
module: ]}
執行 npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d 命令
3.在專案根目錄建立babel 的配置檔案 babel.config.js,並初始化如下配置
const autoprefixer = require('autoprefixer') // 匯入自動新增字首的外掛程式
module.exports =
所有第三方檔案模組的匹配規則
module: ]}
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...
webpack打包檔案
webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...