這里有一份webpack4的配置，項(xiàng)目可直接集成（持續(xù)更新）

Jensen 發(fā)布于2019-08-22 17:32 / 830人閱讀

摘要：隨著前端的發(fā)展，越來(lái)越復(fù)雜的業(yè)務(wù)，各種各樣的插件模塊依賴關(guān)系，項(xiàng)目復(fù)雜度的提升，開(kāi)發(fā)成本越來(lái)越高。就是解決了這一系列的問(wèn)題。

基于webpack4 項(xiàng)目說(shuō)明地址

webpack-scaffold

關(guān)于前端工程化

前端野蠻生長(zhǎng)的時(shí)代已經(jīng)過(guò)去了。隨著前端的發(fā)展，越來(lái)越復(fù)雜的業(yè)務(wù)，各種各樣的插件模塊依賴關(guān)系，項(xiàng)目復(fù)雜度的提升，開(kāi)發(fā)成本越來(lái)越高。webpack就是解決了這一系列的問(wèn)題。你可以利用webpack管理各種資源，也可以提前享受es6語(yǔ)法的便利，也可以規(guī)范成員之間的開(kāi)發(fā)規(guī)范，等等。
關(guān)于wepback配置說(shuō)明，很多同學(xué)都已經(jīng)分享過(guò)很多了，這次分享一下可以直接使用一份webpack項(xiàng)目

功能列表

模塊化管理資源文件，解析編譯ES6語(yǔ)法

使用jslint，強(qiáng)制校驗(yàn)js語(yǔ)法，規(guī)范js書寫規(guī)則，并自動(dòng)修復(fù)部分語(yǔ)法格式問(wèn)題

使用styleLint，強(qiáng)制校驗(yàn)css,less語(yǔ)法，規(guī)范書寫css,less規(guī)則

編譯less文件，自動(dòng)添加瀏覽器前綴

壓縮js,css文件

使用PurifyCSS、OptimizeCssAssets，去除多余css(未被使用)，減少css大小，優(yōu)化css結(jié)構(gòu)，減少50%-80%的文件大小

支持iconfont字體文件

自動(dòng)引入html5shiv、respond，兼容h5標(biāo)簽以及響應(yīng)式

持續(xù)更新中

目前暫時(shí)不支持vue，react

下載依賴

  yarn add jay-webpack-scaffold

配置文件

  cp ./node_modules/jay-webpack-scaffold/webpack/config.dist.js ./webpack-config.js

根據(jù)需求調(diào)整相應(yīng)目錄

配置文件參數(shù)

  entry: 需要編譯輸出的js 根路徑
  output: 輸出的路徑
  mainJs: 全局使用的js文件路徑
  lessPath: 需要編譯輸出的less 根路徑，該目錄下，都會(huì)被編譯輸出
  publicPath: 開(kāi)發(fā)環(huán)境下，使用路徑
  author: 作者名稱
  removePattern: 不需要被輸出的文件路徑 正則表達(dá)式，例如 /^/css/.*.js?$/，表示css目錄下的所有js文件都不輸出（當(dāng)less作為入口文件時(shí)，會(huì)輸出js文件）
  purifyCssPaths: 被使用到css的所有文件地址，如html頁(yè)面和js，它會(huì)過(guò)濾除了這些被使用的css樣式
  copyLibs: 需要拷貝的類庫(kù)，可以拷貝目錄，也可以拷貝多帶帶文件
  alias: 引用別名，加快編譯速度
  libs: js類庫(kù)目錄，每個(gè)文件都會(huì)多帶帶輸出，可以對(duì)已有的類庫(kù)模塊封裝輸出

代碼格式化配置 配置js代碼風(fēng)格

  ./node_modules/.bin/eslint --init

修復(fù)js代碼格式

./node_modules/.bin/eslint --fix filepath

規(guī)則列表：https://eslint.org/docs/rules/

配置樣式代碼風(fēng)格

項(xiàng)目根目錄 .stylelintrc

{
    "extends": "stylelint-config-standard"
}

忽略文件配置 .stylelintignore
規(guī)則列表：https://stylelint.io/user-gui...

開(kāi)發(fā)說(shuō)明

規(guī)范：

默認(rèn)加載全局的css和js文件，每個(gè)頁(yè)面多帶帶具有一個(gè)css文件和js文件

配置參數(shù)lessPath，該目錄下的每個(gè)less文件都會(huì)默認(rèn)編譯輸出成css文件，被每個(gè)頁(yè)面使用

配置參數(shù)entry，目錄下的index.js命名的文件將會(huì)作為編譯輸出

配置參數(shù)mainJs, 全局加載的js

命令(scripts)

  "scripts": {
    "build": "NODE_ENV=production settingPath="/webpack-config.js" webpack --config    "/node_modules/jay-webpack-scaffold/webpack/webpack.js"",
    "dev": "NODE_ENV=development settingPath="webpack-config.js" webpack-dev-server --config "/node_modules/jay-webpack-scaffold/webpack/webpack.js"",
  }

你也可以這樣使用
webpack.config.js

const webpackConfig = require("jay-webpack-scaffold");
module.exports = webpackConfig;
// 可以自主配置loadeer，plugin，及其他參數(shù)

package.json

  "scripts": {
    "build": "NODE_ENV=production settingPath="/webpack-config.js" webpack --config    "webpack.config.js"",
    "dev": "NODE_ENV=development settingPath="webpack-config.js" webpack-dev-server --config "webpack.config.js"",
  }

本地開(kāi)發(fā)環(huán)境執(zhí)行以下命令：

npm run dev

它將會(huì)文件生成好，放入內(nèi)存中。自動(dòng)監(jiān)聽(tīng)文件變化

生產(chǎn)環(huán)境執(zhí)行以下命令：

npm run build

它將會(huì)生產(chǎn)靜態(tài)資源文件到你定義的目錄下

項(xiàng)目中使用 ngixn配置

location ~ ^/dist {
    if (-f $root_dir/dev.lock){
      proxy_pass  http://127.0.0.1:8082;
    }
}

任何/dist/* 的請(qǐng)求，都會(huì)代理到http://127.0.0.1:8082，根據(jù)不同需求相應(yīng)配置

異常情況 npm run dev 執(zhí)行報(bào)錯(cuò)

有可能依賴沒(méi)有下載完成，執(zhí)行yarn

有可能端口被占用執(zhí)行以下命令

lsof -i:8082 （查看占用端口進(jìn)程）
kill -9 PID (pid 為進(jìn)程id號(hào))

參與開(kāi)發(fā)

下載項(xiàng)目： git clone https://github.com/Jay-tian/w...

啟動(dòng)服務(wù)：進(jìn)入項(xiàng)目根目錄，執(zhí)行 npm run dev

將會(huì)打開(kāi) http://127.0.0.1:8082/，資源文件在src下,修改代碼將會(huì)時(shí)時(shí)生效

http://127.0.0.1:8082/webpack-dev-server, 該路徑提供了編譯輸出的資源路徑（資源不是實(shí)體文件）

GPU云服務(wù)器云服務(wù)器持續(xù)集成可持續(xù) 軟件持續(xù)集成敏捷持續(xù)集成

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95255.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jensen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

食品和農(nóng)業(yè)組織難逃網(wǎng)絡(luò)攻擊!美國(guó)農(nóng)場(chǎng)因勒索軟件攻擊損失900萬(wàn)美元

閱讀 2453·2021-09-08 09:45
Electron 14.0.0 發(fā)布、StackBlitz 支持快速創(chuàng)建 Nuxt.js 應(yīng)用 |

閱讀 3391·2021-09-08 09:45
(S)CSS中實(shí)現(xiàn)主題樣式的4?種方式

閱讀 3131·2019-08-30 15:54
javascript系列--javascript深入淺出圖解作用域鏈和閉包

閱讀 3380·2019-08-26 13:54
snabbdom源碼解析（二） h函數(shù)

閱讀 1446·2019-08-26 13:26
函數(shù)式編程學(xué)習(xí)

閱讀 1412·2019-08-26 13:23
2018年9月所遇知識(shí)點(diǎn)整理

閱讀 942·2019-08-23 17:57
javascript真●私有變量

閱讀 2209·2019-08-23 17:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

這里有一份webpack4的配置，項(xiàng)目可直接集成（持續(xù)更新）

相關(guān)文章

webpack4配置之分享幾個(gè)常用插件

**使用 TypeScript 編寫一個(gè)完善包含測(cè)試、文檔和持續(xù)集成的庫(kù)**

webpack4配置詳解之逐行分析

webpack4搭建Vue開(kāi)發(fā)環(huán)境筆記~~持續(xù)更新

發(fā)表評(píng)論

0條評(píng)論

Jensen

男|高級(jí)講師

TA的文章

食品和農(nóng)業(yè)組織難逃網(wǎng)絡(luò)攻擊!美國(guó)農(nóng)場(chǎng)因勒索軟件攻擊損失900萬(wàn)美元

Electron 14.0.0 發(fā)布、StackBlitz 支持快速創(chuàng)建 Nuxt.js 應(yīng)用 |

(S)CSS中實(shí)現(xiàn)主題樣式的4?種方式

javascript系列--javascript深入淺出圖解作用域鏈和閉包

snabbdom源碼解析（二） h函數(shù)

函數(shù)式編程學(xué)習(xí)

2018年9月所遇知識(shí)點(diǎn)整理

javascript真●私有變量

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

這里有一份webpack4的配置，項(xiàng)目可直接集成（持續(xù)更新）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！