Gulp & webpack 配置詳解

時間 2019-11-30

原文原文鏈接

1. Gulp VS webpack 比較

Gulp 是一個任務管理工具，讓簡單的任務更清晰，讓複雜的任務易於掌控；而 webpack 的理念是，一切皆爲模塊，每一個模塊在打包的時候都會通過一個叫作 loader 的東西，它具有很是強大的精細化管理能力，主要解決的是依賴分析問題。javascript

Gulp：搞清楚 gulp.src, gulp.dest, gulp.task, gulp.watch 四個 API 就差很少了，它的底層原理是使用 Node 的 Transform Streams，這是一個可讀可寫可作中間轉換的 Streams 管道，因爲從 src 到 dest 過程當中，文件一直停留在 Streams 中，沒有落地成爲實體文件，因此總體運做效率很是高。css

gulp 經常使用插件：html

gulp-load-plugins：自動加載 package.json 中的 gulp 插件

gulp-rename：重命名
gulp-uglify：文件壓縮
gulp-concat：文件合併
gulp-less：編譯 less
gulp-sass：編譯 sass
gulp-clean-css：壓縮 CSS 文件
gulp-htmlmin：壓縮 HTML 文件
gulp-babel：使用 babel 編譯 JS 文件
gulp-jshint：jshint 檢查
gulp-imagemin：壓縮 jpg、png、gif 等圖片
gulp-livereload：當代碼變化時，它能夠幫咱們自動刷新頁面

Webpack 概念不少，但搞清楚 entry，output 和 loader 三個關鍵點，基本上就能夠解決簡單的問題了，稍微複雜的場景主要包括對資源的合併處理、分拆處理、屢次打包等，部分這樣的問題可使用插件輔助解決，可是 Webpack 的強大並不在文件處理，而是依賴分析，因此在流程操做特別複雜的狀況，webpack 並不能勝任工做，每每會被做爲 gulp 的一個 task，總體工做流交給 gulp 主導。vue

webpack 經常使用的 loader 和 plugin：java

Loader 列表node

less-loader, sass-loader：處理樣式

url-loader, file-loader：兩個都必須用上。不然超過大小限制的圖片沒法生成到目標文件夾中
babel-loader，babel-preset-es2015，babel-preset-react：js 處理，轉碼
expose-loader：將 js 模塊暴露到全局

Plugin 列表react

NormalModuleReplacementPlugin：匹配 resourceRegExp，替換爲 newResource

ContextReplacementPlugin：替換上下文的插件
IgnorePlugin：不打包匹配文件
PrefetchPlugin：預加載的插件，提升性能
ResolverPlugin：替換上下文的插件
DedupePlugin：刪除重複或者類似的文件
LimitChunkCountPlugin：限制打包文件的個數
UglifyJsPlugin：JS文件的壓縮
CommonsChunkPlugin：共用模塊提取
HotModuleReplacementPlugin：runtime時候的模塊熱替換
NoErrorsPlugin：跳過編譯時出錯的代碼並記錄，使編譯後運行時的包不會發生錯誤。
HtmlWebpackPlugin：HTML模塊的熱更新

--jquery

2. Gulp 簡介

Gulp.js 是一個自動化構建工具，開發者可使用它在項目開發過程當中自動執行常見任務。Gulp.js 是基於 Node.js 構建的，利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。Gulp.js 源文件和你用來定義任務的 Gulp 文件都是經過 JavaScript（或者 CoffeeScript ）源碼來實現的。webpack

image.pnggit

2.1 安裝 Gulp

1 . 全局安裝 gulp

npm install --global gulp

2 . 做爲項目的開發依賴（devDependencies）安裝：

npm install --save-dev gulp

咱們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

2.2 配置Gulp

在項目根目錄下建立一個名爲 gulpfile.js 的文件，gulpfile.js是gulp項目的配置文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

2.3 運行gulp

在命令提示符執行 gulp 任務名稱

<!-- 調用默認任務default -->
gulp  或者  gulp default

2.4 清除文件

經過gulp刪除某個文件夾的文件

1 . 安裝 gulp-clean

npm i gulp-clean --save-dev

2 . 編寫 gulpfile.js 代碼

var clean = require('gulp-clean');

gulp.task('clean', function() {
    return gulp.src(['dist/css', 'dist/js'], { read: false })
               .pipe(clean());
});

2.5 編譯less

經過gulp編譯LESS代碼

1 . 安裝 gulp-less

npm i gulp-less --save-dev

2 . 編寫 gulpfile.js 代碼

var less = require('gulp-less');

gulp.task('styles', function() {
    return gulp.src('src/less/*.less') //源文件路徑
        .pipe(less()) //less編譯
        .pipe(gulp.dest('dist/css')) //目的路徑
});

2.6 自動前綴

經過gulp處理css的自動前綴

1 . 安裝 gulp-autoprefixer

npm i gulp-autoprefixer --save-dev

2 . 編寫 gulpfile.js 代碼

var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路徑
        .pipe(autoprefixer()) //自動前綴
        .pipe(gulp.dest('dist/css')) //目的路徑
});

2.7 base64編碼

經過gulp將css中的圖片轉換成base65編碼

1 . 安裝 gulp-base64

npm i gulp-base64 --save-dev

2 . 編寫 gulpfile.js 代碼

var base64 = require('gulp-base64');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路徑
        .pipe(base64()) //base64編碼
        .pipe(gulp.dest('dist/css')) //目的路徑
});

2.8 css壓縮

經過gulp將css進行壓縮

1 . 安裝 gulp-minify-css

npm i gulp-minify-css --save-dev

2 . 編寫 gulpfile.js 代碼

var cssmin = require('gulp-minify-css');

gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路徑
        .pipe(cssmin()) //css壓縮
        .pipe(gulp.dest('dist/css')) //目的路徑
});

2.9 排列文件順序

經過gulp將js調整先後順序

1 . 安裝 gulp-order

npm i gulp-order --save-dev

2 . 編寫 gulpfile.js 代碼

var order = require("gulp-order");

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')  //源文件路徑
        .pipe(order([
            "src/js/config.js",
            "src/js/index.js"
        ]))
        .pipe(gulp.dest('dist/js')) //目的路徑
})

2.10 合併文件

經過gulp將多個文件進行合併

1 . 安裝 gulp-concat

npm i gulp-concat --save-dev

2 . 編寫 gulpfile.js 代碼

var concat = require('gulp-concat');

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')  //源文件路徑
        .pipe(concat('main.js'))  //合併文件
        .pipe(gulp.dest('dist/js')) //目的路徑
})

2.11 重命名文件

經過gulp將文件名進行更改

1 . 安裝 gulp-rename

npm i gulp-rename --save-dev

2 . 編寫 gulpfile.js 代碼

var rename = require('gulp-rename');

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')  //源文件路徑
         .pipe(rename({  
              suffix: '.min'
          }))   //修改文件名     
         .pipe(gulp.dest('dist/js')) //目的路徑
})

2.12 JS文件壓縮

經過gulp將js文件進行壓縮

1 . 安裝 gulp-uglify

npm i gulp-uglify --save-dev

2 . 編寫 gulpfile.js 代碼

var rename = require('gulp-rename');

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')  //源文件路徑
         .pipe(uglify())   //壓縮js
         .pipe(gulp.dest('dist/js')) //目的路徑
})

2.13 圖片壓縮

經過gulp將圖片進行壓縮

1 . 安裝 gulp-imagemin

npm i gulp-imagemin --save-dev

2 . 編寫 gulpfile.js 代碼

gulp.task('images', function() {
    return gulp.src('src/img/*')
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/img'))
});

2.14 處理串行任務

定義多個任務的順序執行關係，不然默認狀況下，任務會以最大的併發數同時運行。

//清除任務
gulp.task('clean', function() {
    return gulp.src('dist/css', { read: false })
        .pipe(clean());
});

//編譯任務
gulp.task('styles', function() {
    return gulp.src('src/less/*.less') //源文件路徑
        .pipe(less()) //less編譯                       
        .pipe(gulp.dest('dist/css')) //目的路徑
});

//先清空目錄，而後再執行編譯CSS
gulp.task('default', ['clean'], function() {
    gulp.start('styles')
});

2.15 熱加載服務

使用 BrowserSync 服務實現文件變動的實時編譯調試

1 . 安裝 browser-sync

npm i browser-sync --save-dev

2 . 編寫 gulpfile.js 代碼

var browserSync = require('browser-sync').create();

gulp.task('dev', function() {
    //初始化browser-sync服務
    browserSync.init({
        server: {
            baseDir: "./dist"
        }
    });
    
    //檢測less文件是否更改，來調用從新編譯css
    gulp.watch('src/less/*', ['styles']);  

    //若是css文件更改過則刷新服務器
    gulp.watch( ['./dist/sys/css/*'] ).on("change", browserSync.reload)
});

3. Webpack 簡介

WebPack能夠看作是模塊打包機：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），從這個文件開始分析你的項目結構，找到項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。

image.png

3.1 配置webpack

1 . 新建一個項目文件夾，而且安裝webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

2 . 新建html以及js文件以下

<html>
    <head>
        <title>webpack</title>
    </head>
    <body>
        <div class="g-index"></div>
        
        <script src="dist/bundle.js"></script>
    </body>
</html>

<!-- common.js -->
exports.printmsg = function(msg) {
    console.log(msg);
}

<!-- index.js -->
var lib = require('./common.js')
lib.printmsg('good')

3 . 編譯webpack

webpack src/js/index.js dist/bundle.js

能夠看到打包結果以下：

$ webpack src/js/index.js dist/bundle.js
Hash: 39e1d99d27c58dd34eb1
Version: webpack 2.5.1
Time: 81ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.82 kB       0  [emitted]  main
   [0] ./src/js/common.js 58 bytes {0} [built]
   [1] ./src/js/index.js 50 bytes {0} [built]

項目結構以下：

image.png

3.2 編寫配置文件

Webpack擁有不少高級的功能，這些功能其實均可以經過命令行模式實現，可是正如已經提到的，這樣不太方便且容易出錯的，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，能夠把全部的與構建相關的信息放在裏面。下面來講明如何定義一個配置文件：

1 . 在根目錄下面新建 webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

2 . 修改 package.json，添加條目以下

{
  ...
  "scripts": {
    "build": "webpack",
  },
  ...
}

3 . 使用命令行編譯項目

npm run build

3.3 調試webpack

開發老是離不開調試，若是能夠更加方便的調試固然就能提升開發效率，不過打包後的文件有時候你是不容易找到出錯了的地方對應的源代碼的位置的，Source Maps就是來幫咱們解決這個問題的。經過簡單的配置後，Webpack在打包時能夠爲咱們生成的source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。

devtool選項	配置結果
source-map	在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包文件的構建速度；
cheap-module-source-map	在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升項目構建速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
eval-source-map	使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。不過在開發階段這是一個很是好的選項，可是在生產階段必定不要用這個選項；
cheap-module-eval-source-map	這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

在學習階段以及在小到中性的項目上，eval-source-map 是一個很好的選項，不過記得只在開發階段使用它，繼續上面的例子，進行以下配置

var path = require('path');
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'eval-source-map'
};

3.4 創建本地開發服務器

Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，能夠實現代碼的熱加載功能，能夠經過它方便的進行代碼的開發。其構建方法以下：

1 . 安裝 webpack-dev-server

npm install --save-dev webpack-dev-server

2 . 修改配置文件 webpack.config.js

var path = require('path');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: "./",
        port: 9000,
        inline: true
    }
};

3 . 修改 package.json，添加條目以下

{
  ...
  "scripts": {
    "dev": "webpack-dev-server",
  },
  ...
}

4 . 輸入 npm run dev 啓動 webpack-dev-server

$ npm run dev                                                                            
                                                                                         
> webpackproj@1.0.0 dev F:\Project\DEMO\webpackdemo                                      
> webpack-dev-server                                                                     
                                                                                         
Project is running at http://localhost:9000/                                             
webpack output is served from /                                                          
Content not from webpack is served from ./                                               
Hash: 1aca755d21fcb2c76314                                                               
Version: webpack 2.5.1                                                                   
Time: 918ms                                                                              
        Asset    Size  Chunks                    Chunk Names                             
    bundle.js  316 kB       0  [emitted]  [big]  main                                    
bundle.js.map  375 kB       0  [emitted]         main                                    
chunk    {0} bundle.js, bundle.js.map (main) 302 kB [entry] [rendered]                   
   [35] (webpack)-dev-server/client?http://localhost:9000 5.68 kB {0} [built]            
   [36] ./src/js/index.js 69 bytes {0} [built]                                           
   [37] ./~/ansi-html/index.js 4.26 kB {0} [built]                                       
   [38] ./~/ansi-regex/index.js 135 bytes {0} [built]                                    
   [40] ./~/events/events.js 8.33 kB {0} [built]                                         
   [41] ./~/html-entities/index.js 231 bytes {0} [built]                                 
   [48] ./~/querystring-es3/index.js 127 bytes {0} [built]                               
   [76] ./~/strip-ansi/index.js 161 bytes {0} [built]                                    
   [78] ./~/url/url.js 23.3 kB {0} [built]                                               
   [79] ./~/url/util.js 314 bytes {0} [built]                                            
   [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]                       
   [81] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]                      
   [83] (webpack)/hot/emitter.js 77 bytes {0} [built]                                    
   [84] ./src/js/common.js 58 bytes {0} [built]                                          
   [85] multi (webpack)-dev-server/client?http://localhost:9000 ./src/js/index.js 40 byte
s {0} [built]                                                                            
     + 71 hidden modules                                                                 
webpack: Compiled successfully.

3.5 配置HTML代碼熱加載

webpack-dev-server 只能監控入口文件（JS/LESS/CSS/IMG）的變化，所以 HTML文件的變化必須依賴插件來進行監控。

1 . 安裝 html-webpack-plugin

npm install html-webpack-plugin --save-dev

2 . 修改配置文件 webpack.config.js, 把 index.html 加入監控

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({   // html代碼熱加載
            template: './index.html'
        }),
    ],
    devServer: {
        contentBase: "./",
        port: 9000,
        inline: true
    }
};

此時能夠取消 html 文件內的 js 引用，由於 html-webpack-plugin 會自動加載編譯完的 js 文件

3.6 配置自動打開瀏覽器

經過配置 open-browser-webpack-plugin 能夠在webpack編譯完以後自動打開瀏覽器；

1 . 安裝 open-browser-webpack-plugin

npm install open-browser-webpack-plugin --save-dev

2 . 修改配置文件 webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({ // html代碼熱加載
            template: './index.html'
        }),
        new OpenBrowserPlugin({ //自動打開瀏覽器
            url: 'http://localhost:9000'
        })
    ],
    devServer: {
        contentBase: "./",
        port: 9000,
        inline: true
    }
};

3.7 配置 json 加載器

使用 json 解析器能夠將常量數據定義在 json文件中，而後在 js 文件中調用。

1 . 在項目根目錄下面建立 config.json 文件，內容以下

{
    "name": "demo",
    "type": "HTML5"
}

2 . 修改 index.js

var config = require('../../config.json')
var lib = require('./common.js')
lib.printmsg(config.name)

3 . 修改配置文件 webpack.config.js

var path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { 
        rules: [{
            test: /\.json$/,
            loader: "json-loader"
        }]
    }
};

項目結構以下：

image.png

3.8 配置 LESS 編譯

1 . 安裝 less style-loader css-loader less-loader

npm install less style-loader css-loader less-loader --save-dev

2 . 在項目的css目錄下面建立 index.less 文件，內容以下

@charset "utf-8";
@gray-base:  #000;
@gray-light:  lighten(@gray-base, 46.7%); 

.g-index {
    height: 100vh;
    background: @gray-light;
}

3 . 修改 index.js

require('../css/index.less')

var lib = require('./common.js')
lib.printmsg('good')

4 . 修改配置文件 webpack.config.js

var path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { 
        rules: [
        {
            test: /\.less$/, // less解析器
            loader: 'style-loader!css-loader!less-loader'
        },]
    }
};

項目結構以下：

image.png

3.9 配置 Babel 編譯

1 . 安裝 babel-core babel-loader babel-preset-es2015

npm install babel-core babel-loader babel-preset-es2015 --save-dev

2 . 修改 common.js 爲 ES6 格式

exports.printmsg = (msg) => {
    console.log(msg);
}

3 . 修改配置文件 webpack.config.js

var path = require('path');
module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { 
        rules: [{
            test: /\.js$/,   //babel解析器
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    }
};

3.10 配置 jQuery 解析器

1 . 安裝 jquery

npm install jquery --save-dev

2 . 修改 index.js 調用 jquery 函數

require('jquery')

$(init)
function init() {
    var lib = require('./common.js')
    lib.printmsg('good')
}

3 . 修改配置文件 webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {   
        rules: [{
            test: /\.js$/,  //babel代碼解析
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({   //jquery解析器
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

3.11 配置 js 代碼壓縮

1 . 修改配置文件 webpack.config.js, 在 plugin 中添加 webpack.optimize.UglifyJsPlugin 模塊

var path = require('path');
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { //在配置文件裏添加JSON loader
        rules: [{
            test: /\.js$/,   //babel代碼解析
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    },
    plugins: [
         new uglifyJsPlugin({ //js代碼壓縮
            compress: {
                warnings: false
            }
        })
    ]
};

3.12 配置 eslint 語法解析

1 . 安裝 esline 庫

npm install eslint eslint-loader eslint-friendly-formatter eslint-plugin-html babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

2 . 在項目根目錄下添加eslint 配置文件.eslintrc.js

// http://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    "indent": [2, 4],//縮進風格
    'no-undef': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

3 . 修改配置文件 webpack.config.js

var path = require('path');

module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { 
        rules: [{
            test: /\.js$/,   //babel代碼解析
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }, {
            test: /\.js$/, //eslint語法解析
            exclude: /node_modules/,
            loader: 'eslint-loader',
            enforce: 'pre',
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }]
    }
};

3.13 配置圖片壓縮器

1 . 安裝 url-loader 庫

npm install url-loader --save-dev

2 . 修改 index.less 文件

@charset "utf-8";
@gray-base:  #000;
@gray-light:  lighten(@gray-base, 46.7%); 

.g-index {
    height: 100vh;
    background: @gray-light;
    background: url('../img/small.png') no-repeat;
}

3 . 修改配置文件 webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ {
            test: /\.less$/, // less解析器
            loader: 'style-loader!css-loader!less-loader'
        }, {
            test: /\.(png|jpg)$/, // img壓縮器
            loader: 'url-loader?limit=8192'
        }]
    }

項目結構以下：

image.png

3.14 配置公共庫抽取

1 . 安裝 chunk-manifest-webpack-plugin webpack-chunk-hash 庫

npm install chunk-manifest-webpack-plugin webpack-chunk-hash  --save-dev

3 . 修改配置文件 webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash");
var ChunkManifestPlugin = require("chunk-manifest-webpack-plugin");

module.exports = {
    devtool: 'source-map',
    entry: { 
        main: './src/js/index.js',
        vendor: ['jquery']
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [ {
            test: /\.less$/, // less解析器
            loader: 'style-loader!css-loader!less-loader'
        }, {
            test: /\.(png|jpg)$/, // img壓縮器
            loader: 'url-loader?limit=8192'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({ // html代碼熱加載
            template: './index.html'
        }),
        new webpack.ProvidePlugin({ //jquery解析器
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin({  //公共庫抽取
            name: ["vendor", "manifest"], // vendor libs + extracted manifest
            minChunks: Infinity,
        }),
        new webpack.HashedModuleIdsPlugin(),
        new WebpackChunkHash(),
        new ChunkManifestPlugin({
          filename: "chunk-manifest.json",
          manifestVariable: "webpackManifest"
        })
    ]
};

3.15 配置模塊分析器

在項目複雜的狀況下，爲了分析多個模塊的相互依賴以及打包的關係，一般引入模塊打包分析工具，能夠清晰的給出每一個模塊的依賴關係。

1 . 安裝 webpack-bundle-analyzer 庫

npm install webpack-bundle-analyzer  --save-dev

2 . 修改配置文件 webpack.config.js

var path = require('path');
var { BundleAnalyzerPlugin }  = require('webpack-bundle-analyzer')

module.exports = {
    devtool: 'source-map',
    entry: { 
        main: './src/js/index.js',
        vendor: ['jquery']
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。