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

基於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, 該路徑提供了編譯輸出的資源路徑（資源不是實體文件）