這里有一份webpack4的配置，項目可直接集成（持續更新）

Jensen 發布于2019-08-22 17:32 / 810人閱讀

摘要：隨著前端的發展，越來越復雜的業務，各種各樣的插件模塊依賴關系，項目復雜度的提升，開發成本越來越高。就是解決了這一系列的問題。

基于webpack4 項目說明地址

webpack-scaffold

關于前端工程化

前端野蠻生長的時代已經過去了。隨著前端的發展，越來越復雜的業務，各種各樣的插件模塊依賴關系，項目復雜度的提升，開發成本越來越高。webpack就是解決了這一系列的問題。你可以利用webpack管理各種資源，也可以提前享受es6語法的便利，也可以規范成員之間的開發規范，等等。
關于wepback配置說明，很多同學都已經分享過很多了，這次分享一下可以直接使用一份webpack項目

功能列表

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

使用jslint，強制校驗js語法，規范js書寫規則，并自動修復部分語法格式問題

使用styleLint，強制校驗css,less語法，規范書寫css,less規則

編譯less文件，自動添加瀏覽器前綴

壓縮js,css文件

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

支持iconfont字體文件

自動引入html5shiv、respond，兼容h5標簽以及響應式

持續更新中

目前暫時不支持vue，react

下載依賴

  yarn add jay-webpack-scaffold

配置文件

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

根據需求調整相應目錄

配置文件參數

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

代碼格式化配置 配置js代碼風格

  ./node_modules/.bin/eslint --init

修復js代碼格式

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

規則列表：https://eslint.org/docs/rules/

配置樣式代碼風格

項目根目錄 .stylelintrc

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

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

開發說明

規范：

默認加載全局的css和js文件，每個頁面多帶帶具有一個css文件和js文件

配置參數lessPath，該目錄下的每個less文件都會默認編譯輸出成css文件，被每個頁面使用

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

配置參數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，及其他參數

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"",
  }

本地開發環境執行以下命令：

npm run dev

它將會文件生成好，放入內存中。自動監聽文件變化

生產環境執行以下命令：

npm run build

它將會生產靜態資源文件到你定義的目錄下

項目中使用 ngixn配置

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

任何/dist/* 的請求，都會代理到http://127.0.0.1:8082，根據不同需求相應配置

異常情況 npm run dev 執行報錯

有可能依賴沒有下載完成，執行yarn

有可能端口被占用執行以下命令

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

參與開發

下載項目： git clone https://github.com/Jay-tian/w...

啟動服務：進入項目根目錄，執行 npm run dev

將會打開 http://127.0.0.1:8082/，資源文件在src下,修改代碼將會時時生效

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

云服務器 GPU云服務器持續集成可持續軟件持續集成敏捷持續集成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95255.html

webpack4配置之分享幾個常用插件

摘要：去做想做的事，去愛值得的人去成為自己喜歡的模樣，去讓自己發光渾身充滿力量，充實的日子最美好各位早安，這里是平頭哥聯盟，我是首席填坑官蘇南，用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　繼上一次webpack的基礎配置分享之后，本次將分享一些工作中項目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 評論0 收藏0
使用 TypeScript 編寫一個完善包含測試、文檔和持續集成的庫

摘要：單元測試一個合格的庫應該包含完整的單元測試。是的支持版，和是一樣的，它能夠直接運行為后綴的單元測試文件。在目錄下加入然后執行即可看到單元測試結果。這篇文章主要是講述如何使用 TypeScript 編寫一個完善，包含測試、文檔、持續集成的庫，涵蓋了編寫整個庫所需要的技術和工具，主要涵蓋：項目目錄骨架 TypeScript 配置使用 jest 單元測試使用 vuepress 編寫...

lingdududu 2019-08-23 14:27 評論0 收藏0
webpack4配置詳解之逐行分析

摘要：今天就嘗試著一起來聊聊吧，旨在幫大家加深理解新手更容易上路，都能從到搭建配置自定屬于自己的腳手架，或對已封裝好的腳手架有進一步的鞏固，接下來蘇南會詳細講解中的每一個配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　經常會有群友問起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 評論0 收藏0
webpack4搭建Vue開發環境筆記~~持續更新

摘要：項目地址一知識獲取當前文件所在路徑，等同于把一個路徑或路徑片段的序列解析為一個絕對路徑給定的路徑的序列是從右往左被處理的，后面每個被依次解析，直到構造完成一個絕對路徑如果處理完全部給定的片段后還未生成一個絕對路徑，則當前工作目錄會被用上生成項目git地址一、node知識 __dirname: 獲取當前文件所在路徑，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 評論0 收藏0