webpack常用外掛程式複習鞏固

npm init -y

生產package.json檔案

ul>li*9

發現需要解決js相容性問題，

import $ from 『jquery』通過發現這種方式匯入報錯，

1, npm install webpack webpack-cli -d 2, 建立webpack.config.js檔案 3, module.exports = 4,package.json檔案中配置scripts命令 "dev": "webpack"

5, 執行： npm run dev

打包入口檔案： src->index.js

打包出口檔案： dist-> main.js

1, npm install webpack-dev-server -d 2, 修改package.json -> scripts中的dev命令 "scripts" 3, 將src -> index.html中的srcipt腳步引用路徑修改為"/bundle.js"

4, 再次執行執行 npm run dev

注意

webpack-dev-server 會啟動乙個實時打包的http 伺服器 webpack-dev-server

打包生產的輸出檔案，預設放到了專案根目錄中，而且是虛擬的，看不見的

1， npm install html-webpack-plugin -d

2, 修改webpack.config.js檔案頭部區域，配置下面資訊

// 匯入生產預覽頁面的外掛程式，得到乙個建構函式
const htmlwebpackplugin = require('html-webpack-plugin')
const htmlplugin = new htmlwebpackplugin()

3, 修改 webpack.config.js 檔案

module.exports =

package.json中配置， open, host, port

"scripts"

1， npm install style-loader css-loader -d 處理css檔案的loader

2，在webpack.config.js中新增配置loader

module: ]} ****注意**** use陣列中指定的loader順序固定的

多個loader 的呼叫順序：從後往前呼叫

npm install less-loader -d npm install sass-loader node-sass -d

注意

可能會報錯：error: cannot find module 『less』

解決： npm install less -d

1,  npm install postcss-loader autoprefixer -d 
2, 在專案中建立postcss的配置檔案postcss.config.js 並初始化配置
const autoperfixer = require('autoprefixer') // 匯入自動新增字首的外掛程式
module.exports = 
3, 在webpack.config.j的module->rules中，新增乙個loader
module: 
]}

1，執行 npm install url-loader file-loader -d 檔案 2，在 webpack.config.js 的module->rules新增 loader規則 module:

]}

1，安裝babel轉換器相關的包 npm install babel-loader @babel/core @babel/runtime -d 2, 安裝babel語法外掛程式相關的包 npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -d 3, 在專案中建立babel-config.js,並初始化配置 module.exports = 4, 在webpack.config.js中新增乙個loader規則

注意：必須要有exclude這一項，因為node_modules的js是第三方外掛程式，不要babel-loader再次處理

webpack常用外掛程式複習鞏固

webpack外掛程式配置及常用外掛程式

Webpack5 常用Plugin（外掛程式）

pyqt5複習鞏固

webpack常用外掛程式複習鞏固

webpack外掛程式配置及常用外掛程式

Webpack5 常用Plugin（外掛程式）

pyqt5複習鞏固

相關推薦