輕輕鬆鬆搞定 Webpack 專案構建

摘要： 基於easywebpack 工程體系，你能非常簡單，快速的編寫出 webpack 複雜的配置，你無需過多關心熱更新，是否壓縮，是否Hash，公共JS/CSS，DLL，構建速度等問題，這些 easywebpack 都已經幫你解決和優化了。 easywebpack 提供 Vue/R...

基於easywebpack 工程體系，你能非常簡單，快速的編寫出 webpack 複雜的配置，你無需過多關心熱更新，是否壓縮，是否Hash，公共JS/CSS，DLL，構建速度等問題，這些 easywebpack 都已經幫你解決和優化了。

ofollow,noindex">easywebpack 提供 Vue/React/JS/HTML 等多種前端框架的 Webpack 構建解決方案，同時結合 easywebpack-cli 工具能夠快速的進行專案開發。

快速編寫 Webpack 配置

根據 easywebpack 拿到基礎配置後，你可以根據自己的需要進行修改和增強。

基於 easywebpack 編寫配置

const easy = require('easywebpack');
module.exports = easy.getWebpackConfig({
env: process.env.BUILD_ENV,// 支援dev, test, prod 模式
target: 'web',
entry: {
app: 'src/lib.js'
}
});

打印出來效果

env 環境說明

預設支援 dev, test, prod 模式，你可以根據自己場景定製

開發環境(easy build dev)

• 開啟 devtool 和 source-map
• 開啟 HMR 熱更新, 記憶體編譯，構建檔案不落地磁碟
• js, css, image 不壓縮
• js, css, image 不 Hash

測試環境(easy build test)

• 禁用 devtool 和 source-map
• 禁用 HMR 熱更新, 構建檔案落地磁碟
• js, css, image 禁用壓縮
• js, css, image 開啟 Hash
• css 分離出獨立的 css 檔案

正式環境(easy build prod)

• 禁用 devtool 和 source-map
• 禁用 HMR 熱更新, 構建檔案落地磁碟
• js, css, image 開啟壓縮
• js, css, image 開啟 Hash
• css 分離出獨立的 css 檔案

解決方案

獲取 Vue 專案配置

預設 Node 和 Web 構建的 Webpack 配置，總共兩個配置, 通過 target: web 獲取前端配置

const easy = require('easywebpack-vue');
const webpackConfig = easy.getWebpackConfig({
env: process.env.BUILD_ENV,// 支援dev, test, prod 模式
target: 'web',
entry: {
app: 'src/lib.js'
}
});

獲取 React 專案配置

預設 Node 和 Web 構建的 Webpack 配置，總共兩個配置, 通過 target: web 獲取前端配置

const easy = require('easywebpack-react');
const webpackConfig = easy.getWebpackConfig({
env: process.env.BUILD_ENV,// 支援dev, test, prod 模式
target: 'web',
entry: {
app: 'src/lib.js'
}
});

獲取 HTML 專案配置

const easy = require('easywebpack-html');
const webpackConfig = easy.getWebpackConfig({
env: process.env.BUILD_ENV,// 支援dev, test, prod 模式
template: 'src/template.html'
entry: {
app: 'src/lib.js'
}
});

獲取 JS 打包配置

const easy = require('easywebpack-js');
const webpackConfig = easy.getWebpackConfig({
env: process.env.BUILD_ENV,// 支援dev, test, prod 模式
entry: {
app: 'src/lib.js'
}
});