webpack開發環境和生產環境打包

// 開發環境webpack.config.js基礎的配置

const path =

require
('path'
)// 首先要安裝該外掛程式 npm i html-webpack-plugin -d
const htmlwebpackplugin =
require
('html-webpack-plugin'
)module.exports =
,// 單出口
output:
,// 多出口
output:
,	devserver:
plugins:
[new
htmlwebpackplugin(}
)],	module:
// 以 .css結尾的檔案使用style-loader，css-loader外掛程式打包
// 要 npm i style-loader css-loader -d 安裝外掛程式打包css檔案
，							
,// 給不同瀏覽器新增對應核心的字首, npm i postcss-loader autoprefixer  安裝postcss-loader 和autoprefixer)]
]}]}
,]}}

注意：module中的rules的babel轉義部分，需要有幾個步驟：

1、npm i babel-loader @babel/core @babel/preset-env -d 安裝這3個外掛程式

2、根目錄下新建.babelrc檔案

修改：1、mode:『production』

2、輸入檔名:

output:

,

4、根目錄下的package.json修改build命令

webpack.prod.js總覽:

const path =

require
('path'
)// 首先要安裝該外掛程式 npm i html-webpack-plugin -d
const htmlwebpackplugin =
require
('html-webpack-plugin'
)module.exports =
,// 單出口
output:
,// 多出口
output:
,	plugins:
[new
htmlwebpackplugin(}
)],	module:
// 以 .css結尾的檔案使用style-loader，css-loader外掛程式打包
// 要 npm i style-loader css-loader -d 安裝外掛程式打包css檔案
，							
,// 給不同瀏覽器新增對應核心的字首, npm i postcss-loader autoprefixer  安裝postcss-loader 和autoprefixer)]
]}]}
,]}}

webpack開發環境和生產環境切換原理

在package.json中有如下設定 scripts 當執行專案時，cmd中敲命令 npm run dev npm run build prod npm run build sit npm run lint，就會執行不同環境下的 如開發環境 生產環境等等。其中cross env是用於跨平台環境變數...

webpack生產環境和開發環境的配置

最近在做公司遊戲預約頁面的時候，在配置webpack的時候，忽略了生產模式切換，導致開發過程中有些痛苦，當改動樣式或者某個外掛程式配置時，本地server要等待編譯很久才生效。用了很久的webpack做開發，之前一直沒太在意，現在特地整理下，也為以後做專案更加規範吧。在配置前，還是先了解下生產環境和...

webpack環境 開發環境和生產環境的區分

模組熱更新 sourcemap 介面 規範檢查 生產環境的需求 提取公共 壓縮混淆 檔案壓縮 base64編碼 去除無用的 二者共同點 同樣的入口 同樣的 處理 loader處理 同樣的解析配置 使用webpack merge拼接開發環境和生產環境 配置檔案 webpack.dev.conf.js ...