亚洲男子av天堂,蜜臀国产在线

1. Gulp VS webpack 比較

Gulp 是一個(gè)任務(wù)管理工具，讓簡單的任務(wù)更清晰，讓復(fù)雜的任務(wù)易于掌控；而 webpack 的理念是，一切皆為模塊，每個(gè)模塊在打包的時(shí)候都會經(jīng)過一個(gè)叫做 loader 的東西，它具備非常強(qiáng)大的精細(xì)化管理能力，主要解決的是依賴分析問題。

Gulp：搞清楚 gulp.src, gulp.dest, gulp.task, gulp.watch 四個(gè) API 就差不多了，它的底層原理是使用 Node 的 Transform Streams，這是一個(gè)可讀可寫可做中間轉(zhuǎn)換的 Streams 管道，由于從 src 到 dest 過程中，文件一直停留在 Streams 中，沒有落地成為實(shí)體文件，所以整體運(yùn)作效率非常高。

gulp 常用插件：

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：當(dāng)代碼變化時(shí)，它可以幫我們自動刷新頁面

Webpack 概念很多，但搞清楚 entry，output 和 loader 三個(gè)關(guān)鍵點(diǎn)，基本上就可以解決簡單的問題了，稍微復(fù)雜的場景主要包括對資源的合并處理、分拆處理、多次打包等，部分這樣的問題可以使用插件輔助解決，但是 Webpack 的強(qiáng)大并不在文件處理，而是依賴分析，所以在流程操作特別復(fù)雜的情況，webpack 并不能勝任工作，往往會被作為 gulp 的一個(gè) task，整體工作流交給 gulp 主導(dǎo)。

webpack 常用的 loader 和 plugin：

Loader 列表

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

url-loader, file-loader：兩個(gè)都必須用上。否則超過大小限制的圖片無法生成到目標(biāo)文件夾中
babel-loader，babel-preset-es2015，babel-preset-react：js 處理，轉(zhuǎn)碼
expose-loader：將 js 模塊暴露到全局

Plugin 列表

NormalModuleReplacementPlugin：匹配 resourceRegExp，替換為 newResource

ContextReplacementPlugin：替換上下文的插件
IgnorePlugin：不打包匹配文件
PrefetchPlugin：預(yù)加載的插件，提高性能
ResolverPlugin：替換上下文的插件
DedupePlugin：刪除重復(fù)或者相似的文件
LimitChunkCountPlugin：限制打包文件的個(gè)數(shù)
UglifyJsPlugin：JS文件的壓縮
CommonsChunkPlugin：共用模塊提取
HotModuleReplacementPlugin：runtime時(shí)候的模塊熱替換
NoErrorsPlugin：跳過編譯時(shí)出錯(cuò)的代碼并記錄，使編譯后運(yùn)行時(shí)的包不會發(fā)生錯(cuò)誤。
HtmlWebpackPlugin：HTML模塊的熱更新

2. Gulp 簡介

Gulp.js 是一個(gè)自動化構(gòu)建工具，開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動執(zhí)行常見任務(wù)。Gulp.js 是基于 Node.js 構(gòu)建的，利用 Node.js 流的威力，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作。Gulp.js 源文件和你用來定義任務(wù)的 Gulp 文件都是通過 JavaScript（或者 CoffeeScript ）源碼來實(shí)現(xiàn)的。

image.png

2.1 安裝 Gulp

1 . 全局安裝 gulp

npm install --global gulp

2 . 作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：

npm install --save-dev gulp

我們?nèi)职惭b了gulp，項(xiàng)目也安裝了gulp，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。

2.2 配置Gulp

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件，gulpfile.js是gulp項(xiàng)目的配置文件

var gulp = require('gulp');

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

2.3 運(yùn)行g(shù)ulp

在命令提示符執(zhí)行 gulp 任務(wù)名稱

<!-- 調(diào)用默認(rèn)任務(wù)default -->
gulp  或者  gulp default

2.4 清除文件

通過gulp刪除某個(gè)文件夾的文件

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中的圖片轉(zhuǎn)換成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進(jìn)行壓縮

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調(diào)整前后順序

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將多個(gè)文件進(jìn)行合并

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將文件名進(jìn)行更改

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文件進(jìn)行壓縮

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將圖片進(jìn)行壓縮

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 處理串行任務(wù)

定義多個(gè)任務(wù)的順序執(zhí)行關(guān)系，否則默認(rèn)情況下，任務(wù)會以最大的并發(fā)數(shù)同時(shí)運(yùn)行。

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

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

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

2.15 熱加載服務(wù)

使用 BrowserSync 服務(wù)實(shí)現(xiàn)文件變更的實(shí)時(shí)編譯調(diào)試

1 . 安裝 browser-sync

npm i browser-sync --save-dev

2 . 編寫 gulpfile.js 代碼

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

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

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

3. Webpack 簡介

WebPack可以看做是模塊打包機(jī)：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），從這個(gè)文件開始分析你的項(xiàng)目結(jié)構(gòu)，找到項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識別的JavaScript文件。

image.png

3.1 配置webpack

1 . 新建一個(gè)項(xiàng)目文件夾，并且安裝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

可以看到打包結(jié)果如下：

$ 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]

項(xiàng)目結(jié)構(gòu)如下：

image.png

3.2 編寫配置文件

Webpack擁有很多高級的功能，這些功能其實(shí)都可以通過命令行模式實(shí)現(xiàn)，但是正如已經(jīng)提到的，這樣不太方便且容易出錯(cuò)的，一個(gè)更好的辦法是定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡單的JavaScript模塊，可以把所有的與構(gòu)建相關(guān)的信息放在里面。下面來說明如何定義一個(gè)配置文件：

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 . 使用命令行編譯項(xiàng)目

npm run build

3.3 調(diào)試webpack

開發(fā)總是離不開調(diào)試，如果可以更加方便的調(diào)試當(dāng)然就能提高開發(fā)效率，不過打包后的文件有時(shí)候你是不容易找到出錯(cuò)了的地方對應(yīng)的源代碼的位置的，Source Maps就是來幫我們解決這個(gè)問題的。通過簡單的配置后，Webpack在打包時(shí)可以為我們生成的source maps，這為我們提供了一種對應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調(diào)試。

devtool選項(xiàng)	配置結(jié)果
source-map	在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)完整且功能完全的文件。這個(gè)文件具有最好的source map，但是它會減慢打包文件的構(gòu)建速度；
cheap-module-source-map	在一個(gè)單獨(dú)的文件中生成一個(gè)不帶列映射的map，不帶列映射提高項(xiàng)目構(gòu)建速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號），會對調(diào)試造成不便；
eval-source-map	使用eval打包源文件模塊，在同一個(gè)文件中生成干凈的完整的source map。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的sourcemap，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。不過在開發(fā)階段這是一個(gè)非常好的選項(xiàng)，但是在生產(chǎn)階段一定不要用這個(gè)選項(xiàng)；
cheap-module-eval-source-map	這是在打包文件時(shí)最快的生成source map的方法，生成的Source Map 會和打包后的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項(xiàng)具有相似的缺點(diǎn)；

在學(xué)習(xí)階段以及在小到中性的項(xiàng)目上，eval-source-map 是一個(gè)很好的選項(xiàng)，不過記得只在開發(fā)階段使用它，繼續(xù)上面的例子，進(jìn)行如下配置

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 建立本地開發(fā)服務(wù)器

Webpack提供一個(gè)可選的本地開發(fā)服務(wù)器，這個(gè)本地服務(wù)器基于node.js構(gòu)建，可以實(shí)現(xiàn)代碼的熱加載功能，可以通過它方便的進(jìn)行代碼的開發(fā)。其構(gòu)建方法如下：

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 只能監(jiān)控入口文件（JS/LESS/CSS/IMG）的變化，因此 HTML文件的變化必須依賴插件來進(jìn)行監(jiān)控。

1 . 安裝 html-webpack-plugin

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

2 . 修改配置文件 webpack.config.js, 把 index.html 加入監(jiān)控

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
    }
};

此時(shí)可以取消 html 文件內(nèi)的 js 引用，因?yàn)? 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 解析器可以將常量數(shù)據(jù)定義在 json文件中，然后在 js 文件中調(diào)用。

1 . 在項(xiàng)目根目錄下面創(chuàng)建 config.json 文件，內(nèi)容如下

{
    "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"
        }]
    }
};

項(xiàng)目結(jié)構(gòu)如下：

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 . 在項(xiàng)目的css目錄下面創(chuàng)建 index.less 文件，內(nèi)容如下

@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'
        },]
    }
};

項(xiàng)目結(jié)構(gòu)如下：

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 調(diào)用 jquery 函數(shù)

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 . 在項(xiàng)目根目錄下添加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],//縮進(jìn)風(fēng)格
    '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'
        }]
    }

項(xiàng)目結(jié)構(gòu)如下：

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 配置模塊分析器

在項(xiàng)目復(fù)雜的情況下，為了分析多個(gè)模塊的相互依賴以及打包的關(guān)系，通常引入模塊打包分析工具，可以清晰的給出每個(gè)模塊的依賴關(guān)系。

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()
    ]
};

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Gulp & webpack 配置詳解

Gulp & webpack 配置詳解

1. Gulp VS webpack 比較

2. Gulp 簡介

2.1 安裝 Gulp

2.2 配置Gulp

2.3 運(yùn)行g(shù)ulp

2.4 清除文件

2.5 編譯less

2.6 自動前綴

2.7 base64編碼

2.8 css壓縮

2.9 排列文件順序

2.10 合并文件

2.11 重命名文件

2.12 JS文件壓縮

2.13 圖片壓縮

2.14 處理串行任務(wù)

2.15 熱加載服務(wù)

3. Webpack 簡介

3.1 配置webpack

3.2 編寫配置文件

3.3 調(diào)試webpack

3.4 建立本地開發(fā)服務(wù)器

3.5 配置HTML代碼熱加載

3.6 配置自動打開瀏覽器

3.7 配置 `json` 加載器

3.8 配置 `LESS` 編譯

3.9 配置 `Babel` 編譯

3.10 配置 `jQuery` 解析器

3.11 配置 `js` 代碼壓縮

3.12 配置 `eslint` 語法解析

3.13 配置圖片壓縮器

3.14 配置公共庫抽取

3.15 配置模塊分析器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Gulp & webpack 配置詳解

1. Gulp VS webpack 比較

2. Gulp 簡介

2.1 安裝 Gulp

2.2 配置Gulp

2.3 運(yùn)行g(shù)ulp

2.4 清除文件

2.5 編譯less

2.6 自動前綴

2.7 base64編碼

2.8 css壓縮

2.9 排列文件順序

2.10 合并文件

2.11 重命名文件

2.12 JS文件壓縮

2.13 圖片壓縮

2.14 處理串行任務(wù)

2.15 熱加載服務(wù)

3. Webpack 簡介

3.1 配置webpack

3.2 編寫配置文件

3.3 調(diào)試webpack

3.4 建立本地開發(fā)服務(wù)器

3.5 配置HTML代碼熱加載

3.6 配置自動打開瀏覽器

3.7 配置 json 加載器

3.8 配置 LESS 編譯

3.9 配置 Babel 編譯

3.10 配置 jQuery 解析器

3.11 配置 js 代碼壓縮

3.12 配置 eslint 語法解析

3.13 配置圖片壓縮器

3.14 配置公共庫抽取

3.15 配置模塊分析器

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

3.7 配置 `json` 加載器

3.8 配置 `LESS` 編譯

3.9 配置 `Babel` 編譯

3.10 配置 `jQuery` 解析器

3.11 配置 `js` 代碼壓縮

3.12 配置 `eslint` 語法解析