1、執行 npm install webpack webpack-cli -d 命令，安裝webpack 相關的包
2、在專案根目錄中，建立名為webpack.config.js 的 webpack 配置檔案
3、在 webpack 的配置檔案中，初始化如下基本配置：
module.exports =
"scripts"
:
webpack的 4.x 版本中預設約定：
如果要修改打包的入口與出口，可以在 webpack.config.js 中新增如下配置資訊：
const path =
require
('path'
)// 匯入 node.js 中專門操作路徑的模組
1、執行 npm install webpack-dev-server -d 命令，安裝支援專案自動打包的工具
2、修改 package.json -> scripts 中的 dev 命令如下：
"scripts"
:
3、將 src -> index.html 中，script 指令碼的引用路徑，修改為 「/bundle.js」
4、執行 npm run dev 命令，重新進行打包
5、在瀏覽器中訪問 http://localhost:8080 位址，檢視自動打包效果
注意：1、執行 npm install html-webpack-plugin -d 命令，安裝生成預覽頁面的外掛程式
2、修改 webpack.config.js 檔案頭部區域，新增如下配置資訊：
// 匯入生成預覽頁面的外掛程式，得到乙個建構函式
const htmlwebpackplugin =
require
('html-webpack-plugin'
)const htmlplugin =
newhtmlwebpackplugin
()
3、修改 webpack.config.js 檔案中向外暴露的配置物件，新增如下配置節點：
module.exports =
// package.json中的配置
// --open 打包完成後自動開啟瀏覽器頁面
// --host 配置 ip 位址
// --port 配置埠
"scripts"
:,
1、執行 npm i style-loader css-loader -d 命令，安裝處理 css 檔案的 loader
2、在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
其中，test 表示匹配的檔案型別，use 表示對應要呼叫的loader
注意：1、執行 npm i less-loader less -d 命令
2、在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
1、執行 npm i sass-loader node-sass -d 命令
2、在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
// 所有第三方檔案模組的匹配規則
module:
]}
1、執行 npm i postcss-loader autoprefixer -d 命令
2、在專案根目錄中建立 postcss 的配置檔案 postcss.config.js,並初始化如下配置：
const autoprefixer =
require
('autoprefixer'
)// 匯入自動新增字首的外掛程式
module.exports =
3、在 webpack.config.js 的 module -> rules 陣列中，修改 css 的 loader 規則如下：
module:
]}
1、執行 npm i url-loader file-loader -d 命令
2、在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
module:
]}
其中 ？之後的是 loader 的引數項。
limit 用來指定的大小，單位是位元組（byte），只有小於 limit 大小的，才會被轉為 base64
2、安裝babel語法外掛程式相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d
3、在專案根目錄中，建立 babel 配置檔案 babel.config.js 並初始化基本配置如下：
module.exports =
4、在 webpack.config.js 的 module -> rules陣列中，新增 loader 規則如下：
// exclude 為排除項，表示 babel-loader 不需要處理 node_modules 中的 js 檔案
december 18, 2019 9:45 p webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack開啟專案命令 Webpack的使用
webpack的使用 在專案中安裝和配置webpack 1 執行npm install webpack webpack cli d命令 安裝webpack相關的包 2 在專案的根目錄中，建立webpack.config.js的webpack 配置檔案 3 在webpack 的配置檔案中初始化如下基本...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...