這裡有一份webpack4的設置，項目可直接集成（延續更新）

2023年6月1日 140次阅读 来源: jay_tian

基於webpack4

項目申明地點

webpack-scaffold

關於前端工程化

前端蠻橫生長的時期已過去了。跟着前端的生長，愈來愈龐雜的營業，林林總總的插件模塊依靠關聯，項目龐雜度的提拔，開闢本錢愈來愈高。webpack就是處理了這一系列的題目。你能夠應用webpack治理種種資本，也能夠提早享用es6語法的方便，也能夠範例成員之間的開闢範例，等等。
關於wepback設置申明，許多同硯都已分享過許多了，此次分享一下能夠直接運用一份webpack項目

功用列表

  1. 模塊化治理資本文件，剖析編譯ES6語法
  2. 運用jslint，強迫校驗js語法，範例js謄寫劃定規矩，並自動修復部份語法花樣題目
  3. 運用styleLint，強迫校驗css,less語法，範例謄寫css,less劃定規矩
  4. 編譯less文件，自動增加瀏覽器前綴
  5. 緊縮js,css文件
  6. 運用PurifyCSS、OptimizeCssAssets，去除過剩css(未被運用)，削減css大小，優化css構造，削減50%-80%的文件大小
  7. 支撐iconfont字體文件
  8. 自動引入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…

開闢申明

範例：

  1. 默許加載全局的css和js文件，每一個頁面零丁具有一個css文件和js文件
  2. 設置參數lessPath，該目次下的每一個less文件都邑默許編譯輸出成css文件，被每一個頁面運用
  3. 設置參數entry，目次下的index.js定名的文件將會作為編譯輸出
  4. 設置參數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

它將會文件天生好，放入內存中。自動監聽文件變化
<br/>

臨盆環境實行以下敕令：

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 實行報錯

  1. 有能夠依靠沒有下載完成，實行yarn
  2. 有能夠端口被佔用 實行以下敕令
lsof -i:8082 （檢察佔用端口歷程）
kill -9 PID (pid 為歷程id號)

介入開闢

  1. 下載項目： git clone https://github.com/Jay-tian/w…
  2. 啟動效勞：進入項目根目次，實行 npm run dev
  3. 將會翻開 http://127.0.0.1:8082/，資本文件在src下,修正代碼將會常常見效
  4. http://127.0.0.1:8082/webpack-dev-server, 該途徑供應了編譯輸出的資本途徑（資本不是實體文件）
    原文作者：jay_tian
    原文地址: https://segmentfault.com/a/1190000015024438
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞