九九精品网,国产亚洲视频一区二区,夜夜女女无码

博客鏈接 http://blog.poetries.top/2018/11/21/webpack-review/

關注公眾號獲取更多資訊

基于webpack3

一、webpack簡介

1.1 版本更迭

image.png

大版本變化

image.png

1.2 功能進化

Webpack V1

編譯、打包
HMR (模塊熱更新)
代碼分割
文件處理

Webpack V2

Tree Shaking
ES module
動態(tài) Import
新的文檔

Webpack V3

Scope Hoisting (作用域提升)
Magic Comments （配合動態(tài)import使用）

版本遷移

V1 -> V2

遷移指南 https://doc.webpack-china.org/guides/migrating/

V2 -> V3

更新升級即可

二、webpack核心概念

2.1 Entry

代碼的入口
打包的入口
單個或多個

寫法建議使用鍵值對寫法

module.exports = {
  entry: 'index.js'
}

module.exports = {
  entry: '[index.js','vendor.js']
}

module.exports = {
  entry: {
      index:'index.js'
  }
}

module.exports = {
  entry: {
      index:['index.js','app.js'],
      vendor: 'vendor.js'
  }
}

2.2 Output

打包成的文件(bundle)
一個或多個
自定義規(guī)則
配合CDN

module.exports = {
  entry: 'index.js',
  output: {
      filename: 'index.min.js'
  }
}

module.exports = {
  entry: {
    index: 'index.js',
    vendor: 'vendor.js'
  },
  output: {
      filename: '[name].min[hash:5].js'
  }
}

2.3 Loaders

處理文件
轉化為模塊

module.exports = {
  module: {
      rules: [
        {
            test: /\.css$/,
            use: 'css-loader'
        }
      ]
  }
}

2.3.1 常用Loader

編譯相關

babel-loader
ts-loader

樣式相關

style-loader
css-loader
less-loader
postcss-loader

文件相關

file-loader
url-loader

2.4 Plugins

參與打包整個過程
打包優(yōu)化和壓縮
配置編譯時的變量
極其靈活

module.exports = {
 plugins: [
    new webpack.optimize.UglifyJsPlugin()
 ]
}

2.4.1 常用plugins

優(yōu)化相關

CommonsChunkPlugin
UglifyJsWebpackPlugin

功能相關

ExtractTextWebpackPlugin 提取css
HtmlWebpackPlugin 生成HTML模板
HotModuleReplacementPlugin 熱模塊替換
CopyWebpackPlugin 拷貝文件

2.5 名詞

Chunk 打包過程分割的代碼塊
Bundle 打包后的文件
Module

三、初探 webpack

3.1 使用babel打包es6

3.1.1 編譯 ES 6/7

Babel

npm install babel-loader@8.0.0-beta.0 @babel/core
npm install –save-dev babel-loader babel-core

Babel Presets

主要有幾種類型選擇

es2015
es2016
es2017
env
babel-preset-react
babel-preset-stage 0 - 3

npm install @babel/preset-env –save-dev
npm install babel-preset-env –save-dev

Babel Polyfill

針對一些不能處理的函數(shù)方法(Generator、Set、Map、Array.from...)需要用到babel-Polyfill處理

全局墊片
為應用準備

npm install babel-polyfill –save

import “babel-polyfill”

Babel Runtime Transform

局部墊片
為開發(fā)框架準備

npm install babel-plugin-transform-runtime –save-dev

npm install babel-runtime –save

例子

module.exports = {
    entry: {
       app: 'app.js'
    },
    output: {
        filename: '[name].[hash:8].js'
    },
    module: {
        rules:[
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',{
                            //指定target為根據(jù)哪些語法編譯
                            targets: {
                                browsers: ['> 1%','last 2 versions']
                            }
                        }
                    ]
                }
            },
            exclude: '/node_modules'
        ]
    }
}

對于webpack中babel的配置可以單獨提取處理.babelrc統(tǒng)一管理

{
    "presets": [
        ["@babel/preset-env",{
            targets: {
                browsers: ['> 1%','last 2 versions']
            }
        }]
    ],
    "plugins": [
      "transform-runtime"
    ]
]

3.2 打包 Typescript

npm i typescipt ts-loader  --save-dev
npm i typescipt awesome-typescript-loader  --save-dev

配置

tsconfig.json
webpack.config.js

tsconfig

配置選項:官網(wǎng)/docs/handbook/compiler-options.html
常用選項 compilerOptions include exclude

聲明文件

用于編譯時檢查錯誤

以loadsh為例，需要安裝@types/lodash帶有聲明文件的，而不是安裝lodash

npm install @types/lodash
npm install @types/vue

Typings

也可以這樣安裝帶有type的包

npm install typings
typings install lodash

例子

module.exports = {
    entry: {
        'app': 'app.js'
    },
    output: {
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            test: /\.tsx?$/,
            use: {
                loader: 'ts-loader'
            }
        ]
    }
}

在項目根目錄創(chuàng)建tsconfig.json

 {
    "compilerOptions": {
         "module": "comonjs",
         "target": "es5", //編譯后的文件在哪個環(huán)境運行
         "allowJs": true,//允許js語法
    },
    "include": [
        //編譯路徑
        "./src/*"
    ],
    "exclude": [
        //排除編譯文件
        "./node_modules"
    ]
 }

3.3 提取 js 的公用代碼

減少代碼冗余
提高加載速度

主要使用內(nèi)置插件實現(xiàn)webpack.optimize.CommonsChunkPlugin

{
    plugins: [
         new webpack.optimize.CommonsChunkPlugin(option)
    ]
}

例子

module.exports = {
    entry: {
        "pageA": "./src/pageA",
        "pageB": "./src/pageB",
        "vendor": ['loash']//業(yè)務代碼和第三方代碼區(qū)分開,給loash單獨打一個包
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
    // 提取common
    new webpack.optimize.CommonsChunkPlugin({
         name: 'common',
         minChunks:2,//出現(xiàn)兩次就打包成common代碼
         chunks: ['pageA','pageB']//指定范圍提取公共代碼
     })
        
    // 提取vendor、取業(yè)務代碼manifest
     new webpack.optimize.CommonsChunkPlugin({
         //把entry的vendor代碼和這里的common（webpack打包的）代碼合并
         names: ['vendor','manifest']
         minChunks: Infinity
     })
     // ==== 提取業(yè)務代碼manifest== 合并到上面names中
     // 如果不想把webpack打包的代碼和vendor代碼合并 需要提取到manifest
     //new webpack.optimize.CommonsChunkPlugin({
         // webpack代碼和vendordiam區(qū)分開
       //  name: 'manifest' //manifest即生成
       //  minChunks: Infinity
    // })
     
    ]
}

image.png

3.4 代碼分割和懶加載

第一種方式：通過wepack內(nèi)置方法

require.ensure動態(tài)加載一個模塊，接收四個參數(shù)

[]:dependencies 初次并不會執(zhí)行
callback的時候才會執(zhí)行
errorCallback 可省略
chunkName

第二種方式：通過ES2015 Loader Spec

System.import()后面演變?yōu)?code>import()來動態(tài)加載模塊

import()方式返回一個promise在import中傳入需要依賴的明，動態(tài)加載模塊，就可以像使用Promise一樣使用import().then()

代碼分割場景

分離業(yè)務代碼和第三方依賴
分離業(yè)務代碼和業(yè)務公共代碼和第三方依賴
分離首次加載和訪問后加載的代碼

例子

module.exports = {
    entry: {
        "pageA": "./src/pageA"
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist/',//動態(tài)加載路徑
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    }
}

目標是提取pageA、pageB中公共的模塊moduleA

//src/pageA.js

import './subPageA'
import './subPageB'

//ensure的時候代碼不會執(zhí)行 需要在下面加載一次
require.ensure(['lodash'],function(){
    var _ = require('lodash')
    _.join([1,2,3])
},'vendor')// 指定chunk名稱


export default 'pageA'

運行打包這時loadash提取到vendor中

image.png

這時候還不是我們想要的

//src/pageA.js

require.include('./moduleA')

if(page === 'subPageA'){
  require.ensure(['./subPageA'],function(){
    var subPageA = require('./subPageA')
    },'subPageA')// 指定chunk名稱
}else{
  require.ensure(['./subPageB'],function(){
    var subPageB = require('./subPageB')
    },'subPageB')// 指定chunk名稱
}


//ensure的時候代碼不會執(zhí)行 需要在下面加載一次
require.ensure(['lodash'],function(){
    var _ = require('lodash')
    _.join([1,2,3])
},'vendor')// 指定chunk名稱


export default 'pageA'

image.png

這時候這有pageA中才有moduleA

image.png

新建一個html驗證是否動態(tài)加載

<html>
    <body>
        <script src="./dist/pageA.bundle.js"></script>
    </body>
</html>

image.png

import()動態(tài)加載的寫法

//src/pageA.js

require.include('./moduleA')

var page = 'subPageA'

if(page === 'subPageA'){
 // 指定chunkName /** webpackChunkName: 'subPageA' **/ 
  import(/** webpackChunkName: 'subPageA' **/,'./subPageA').then(function(subPageA){
      console.log(subPageA)
  })
}else{
  import(/** webpackChunkName: 'subPageB' **/'./subPageB').then(function(subPageB){
      console.log(subPageB)
  })
}

// 異步加載lodash
//ensure的時候代碼不會執(zhí)行 需要在下面加載一次
require.ensure(['lodash'],function(){
    var _ = require('lodash')
    _.join([1,2,3])
},'vendor')// 指定chunk名稱


export default 'pageA'

如果/** webpackChunkName: 'subPageA' **/相同，則會合并處理

合并了subPageA和subPageB

image.png

來看看打包后的文件，既有A、B

image.png

在webpack代碼分割中使用async異步加載

module.exports = {
    entry: {
        "pageA": "./src/pageA",
        "pageB": "./src/pageB",
        "vendor": ['loash']//業(yè)務代碼和第三方代碼區(qū)分開,給loash單獨打一個包
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
    // add 異步模塊
    new webpack.optimize.CommonsChunkPlugin({
        aysnc:'async-common',//異步共同的東西
        children: true,
        names: ['vendor','manifest']
        minChunks: Infinity
    })
     
     
    // 提取vendor、取業(yè)務代碼manifest
     new webpack.optimize.CommonsChunkPlugin({
         //把entry的vendor代碼和這里的common（webpack打包的）代碼合并
         names: ['vendor','manifest']
         minChunks: Infinity
     })
     
    ]
}

//src/subPageA.js


import './moduleA'

console.log('this. is subPageA')

export default 'subPageA'

//src/subPageB.js


import './moduleA'

console.log('this. is subPageB')

export default 'subPageB'

//src/subPageB.js


import './moduleA'

console.log('this. is moduleA')

export default 'moduleA'

//src/pageA.js

// 異步加載不能include 否則會和pageA打包到一起
// require.include('./moduleA')

import _ from 'lodash'

var page = 'subPageA'

if(page === 'subPageA'){
 // 指定chunkName /** webpackChunkName: 'subPageA' **/ 
  import(/** webpackChunkName: 'subPageA' **/,'./subPageA').then(function(subPageA){
      console.log(subPageA)
  })
}else{
  import(/** webpackChunkName: 'subPageB' **/'./subPageB').then(function(subPageB){
      console.log(subPageB)
  })
}

// === lodash不在異步加載
//ensure的時候代碼不會執(zhí)行 需要在下面加載一次
//require.ensure(['lodash'],function(){
//    var _ = require('lodash')
//    _.join([1,2,3])
//},'vendor')// 指定chunk名稱


export default 'pageA'

//src/pageB.js

import _ from 'lodash'

var page = 'subPageB'

if(page === 'subPageA'){
 // 指定chunkName /** webpackChunkName: 'subPageA' **/ 
  import(/** webpackChunkName: 'subPageA' **/,'./subPageA').then(function(subPageA){
      console.log(subPageA)
  })
}else{
  import(/** webpackChunkName: 'subPageB' **/'./subPageB').then(function(subPageB){
      console.log(subPageB)
  })
}

// === lodash不在異步加載
//ensure的時候代碼不會執(zhí)行 需要在下面加載一次
//require.ensure(['lodash'],function(){
//    var _ = require('lodash')
//    _.join([1,2,3])
//},'vendor')// 指定chunk名稱


export default 'pageB'

image.png

這樣就把subpageA和subPageB共同依賴的moduleA異步提取出來

3.5 處理 CSS 和 CSS 模塊化

引入css

需要兩個loader，style-loader(創(chuàng)建標簽到文檔流中)、css-loader(可以import一個樣式文件，使得在js中可以使用)

Style-Loader

style-loader除了本身，還有這幾個loader

style-loader/url 可以注入link標簽到頁面
style-loader/useable 控制樣式是否插入到頁面中

Style-Loader的options

insertAt （插入位置）
insertInto （插入到dom）
singleton （是否只使用一個style 標簽）
transform （轉化，瀏覽器環(huán)境下，插入頁面前）

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        // loader解析從后往前處理
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        //loader: 'style-loader',
                        loader: 'style-loader/url', //使用這個可以往頁面注入link標簽 而不是style,這個并不常用
                    },
                    {
                        //loader: 'css-loader',
                        loader: 'file-loader'//使用這個可以往頁面注入link標簽 而不是style 這個并不常用
                    }
                ]
            }
        ]
    }
}

CSS-Loader

options

alias （解析的別名）
importLoader （@import ）
Minimize （是否壓縮）
modules （啟用css-modules）

CSS-Modules

localIdentName: '[path][name]__[local]--[hash:base64:5]'

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        // loader解析從后往前處理
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                           minimize:true,
                           modules: true,
                           // css模塊化
                           localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                    }
                ]
            }
        ]
    }
}

配置Less / Sass

npm install less-loader less  --save-dev
npm install sass-loader node-sass --save-dev

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        // loader解析從后往前處理
        rules: [
            {
                test: /\.(css|less)$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                           minimize:true,
                           modules: true,
                           // css模塊化
                           localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                    },
                    {
                        loader: 'less-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
}

提取 CSS

extract-loader
ExtractTextWebpackPlugin

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        // loader解析從后往前處理
        rules: [
            {
                test: /\.(css|less)$/,
                use:
                ExtractTextWebpackPlugin.extra({
                    // 提取css并不會自動加入到文檔中，需要在HTML手動加入css文件
                    fallback: {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    // 處理css
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                               minimize:true,
                               modules: true,
                               // css模塊化
                               localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                        },
                        {
                            loader: 'less-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css',
            allChunks: false //指定提取css范圍，true所有import進來的css
        })
    ]
}

image.png

3.6 PostCSS in Webpack

安裝

postcss
postcss-loader
Autoprefixer
cssnano
postcss-cssnext

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        // loader解析從后往前處理
        rules: [
            {
                test: /\.(css|less)$/,
                use:
                ExtractTextWebpackPlugin.extra({
                    // 提取css并不會自動加入到文檔中，需要在HTML手動加入css文件
                    fallback: {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    // 處理css
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                               minimize:true,
                               modules: true,
                               // css模塊化
                               localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                        },
                        {
                            loader: 'less-loader'
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    require('antoprefixer')()
                                ]
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css',
            allChunks: false //指定提取css范圍，true所有import進來的css
        })
    ]
}

3.7 Tree shaking

3.7.1 JS Tree shaking

使用場景

常規(guī)優(yōu)化
引入第三方庫的某一個功能

例子

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env'],
                            plugins: [
                                // lodash Tree shaking
                                'lodash'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css',
            allChunks: false //指定提取css范圍，true所有import進來的css
        })
        // Tree shaking
        new webpack.optimize.UglifyJsPlugin({
            
        })
    ]
}

有些庫不是es模塊寫的，并不能tree shaking。需要借助其他工具

npm i babel-loader babel-core babel-preset-env babel-plugin-lodash --save

lodash Tree不生效

lodash-es --> no
babel-lugin-lodash --->working

查看模塊是否Tree Shaking方式：去第三方庫index.js中看模塊書寫方式是否是es

3.7.2 CSS Tree shaking

主要使用 purifycss-webpack

例子

const glob = require('glob-all')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/', //指定從項目中哪里引入資源 
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env'],
                            plugins: [
                                // lodash Tree shaking
                                'lodash'
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({
            filename: '[name].min.css',
            allChunks: false //指定提取css范圍，true所有import進來的css
        })
        
        // 放到ExtractTextWebpackPlugin后面
        new PurifyCss({
            paths: glob.sync([
                path.join(__dirname,'./*.html'),
                path.join(__dirnname,'./src/*.js')
            ])
        })
        
        // Tree shaking
        new webpack.optimize.UglifyJsPlugin({
            
        })
    ]
}

四、由淺入深Webpack

4.1 文件處理

4.1.1 圖片處理

css中引入圖片
自動合成雪碧圖
壓縮圖片
Base64編碼

處理需要用到的loader

file-loader css中引入圖片
url-loader base64編碼
img-loader 壓縮圖片
postcss-sprites合成雪碧圖

4.1.2 處理雪碧圖、base64、壓縮圖片

module.exports = {
    module: {
         rules: [
            {
                test: /\.(css|less)$/,
                use:
                extractLess.extract({
                    // 提取css并不會自動加入到文檔中，需要在HTML手動加入css文件
                    fallback: {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    // 處理css
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                               minimize:true,
                               modules: true,
                               // css模塊化
                               localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                        },
                        {
                            loader: 'less-loader'
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    // 合并雪碧圖
                                    require('postcss-sprites')({
                                        // 指定雪碧圖輸出路徑
                                        spritePath: 'dist/assets/imgs/sprites',
                                        retina: true // 處理蘋果高清retina 圖片命名需要 xx@2x.png,對應的圖片的css大小設置也要減小一半 
                                    })
                                ]
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                use:[
                    //{
                    //    loader: //'file-loader',//處理圖片
                    //    options: {
                    //       publicPath:'',// 使得圖片地址可以訪問
                    //       outputPath: 'dist/'
                    //       useRelativePath:true
                        //}
                    
                    //}
                    // url-loader會把圖片轉成base64
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].min.[ext]' //5kb內(nèi)會轉成base64 ,否則輸出圖片路徑
                            limit: 1000, 
                            publicPath:'',
                            outputPath: 'dist/',
                            useRelativePath:true
                        }
                    },
                    // 壓縮圖片
                    {
                        loader: 'img-loader',
                        options: {
                            pngquant: {
                                //圖片質(zhì)量
                                quality:80
                            }
                        }
                    },
                    
                ]
            }
        ]
    }
}

4.1.2 處理字體文件

file-loader
url-loader

module.exports = {
    module: {
         rules: [
            {
                test: /\.(css|less)$/,
                use:
                extractLess.extract({
                    // 提取css并不會自動加入到文檔中，需要在HTML手動加入css文件
                    fallback: {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    // 處理css
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                               minimize:true,
                               modules: true,
                               // css模塊化
                               localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                        },
                        {
                            loader: 'less-loader'
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    // 合并雪碧圖
                                    require('postcss-sprites')({
                                        // 指定雪碧圖輸出路徑
                                        spritePath: 'dist/assets/imgs/sprites',
                                        retina: true // 處理蘋果高清retina 圖片命名需要 xx@2x.png,對應的圖片的css大小設置也要減小一半 
                                    })
                                ]
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                use:[
                    //{
                    //    loader: //'file-loader',//處理圖片
                    //    options: {
                    //       publicPath:'',// 使得圖片地址可以訪問
                    //       outputPath: 'dist/'
                    //       useRelativePath:true
                        //}
                    
                    //}
                    // url-loader會把圖片轉成base64
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].min.[ext]' //5kb內(nèi)會轉成base64 ,否則輸出圖片路徑
                            limit: 1000, 
                            publicPath:'',
                            outputPath: 'dist/',
                            useRelativePath:true
                        }
                    },
                    // 壓縮圖片
                    {
                        loader: 'img-loader',
                        options: {
                            pngquant: {
                                //圖片質(zhì)量
                                quality:80
                            }
                        }
                    },
                    // 處理字體文件
                    {
                        test: /\.(eot|woff2|woff|ttf|svg)$/,
                        use: [
                            {
                                loader:'url-loader',
                                options: {
                                    name: '[name].min.[ext]' //5kb內(nèi)會轉成base64 ,否則輸出圖片路徑
                                    limit: 5000, 
                                    publicPath:'',
                                    outputPath: 'dist/',
                                    useRelativePath:true
                                }
                            }
                        ]
                    }
                    
                ]
            }
        ]
    }
}

4.1.3 處理第三方 JS 庫

處理第三方庫用到providePlugin、imports-loader

1.providePlugin

以引入jQuery為例

npm i jquery

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            // 在全局注入jQuery變量
            $:'jquery'
        })
    ]
}

引入本地libs中的jQuery

module.exports = {
    resolve: {
        alias: {
            // $確切匹配 把jQuery這個關鍵字解析到某個目錄下
            jquery$:path.resolve(__dirname,'src/libs/jquery.min.js')
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            // 在全局注入jQuery變量
            $:'jquery'
        })
    ]
}

2.imports-loader

module.exports = {
    module:{
        rules:[
            {
                test:path.resolve(__dirname,'src/app.js'),
                use:[
                    {
                        loader: 'imports-loader',
                        options: {
                            $: 'jquery'
                        }
                    }
                ]
            }
        ]
    }
}

4.2 HTML in webpack(自動生成HTML)

自動生成HTML，把這個頁面需要的js、css插入到頁面中

4.2.1 生成 HTML

htmlWebpackPlugin

options

template
filename
minify 是否壓縮
chunks
inject 是否讓css、js通過標簽形式插入到頁面中

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugin:[
        new htmlWebpackPlugin({
            filename:'index.html', // 不傳默認index.html
            template: './index.html',//傳入模板
            inject:true,//控制js\css是否插入到頁面
            minify: {
                collapseWhitespace:true //壓縮空格
            },
            chunks:['app']//指定chunks會把跟這個入口相關的chunks插入到頁面中
        })
    ]
}

4.2.2 HTML 中引入圖片

需要用到html-loader

html-loader

options

attrs: [img:src]

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        publicPath:'/' //網(wǎng)站路徑為/ 圖片等資源引用不會發(fā)生錯誤
    },
    module:{
        rules:[
            {
                loader: 'url-loader',
                options: {
                    name: '[name].min.[ext]' //5kb內(nèi)會轉成base64 ,否則輸出圖片路徑
                    limit: 1000, 
                    publicPath:'',
                    outputPath: 'assets/imgs/',
                    //useRelativePath:true // 這里不能使用這個 因為圖片路徑在HTML中、css中都存在，打包的時候圖片會放錯地方。需要用到絕對路徑，在output指定publicPath:'/'
                }
            },
            // 處理HTML中的圖片引用路徑問題
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src','img:data-src']
                        }
                    }
                ]
            }
        ]
    }
}

require在HTML中引入圖片

<img src="${require('./public/imgs/xx.png)}" />

4.2.3 配合優(yōu)化

提前載入webpack加載代碼

inline-manifest-webpack-plugin
html-webpack-inline-chunk-plugin

建議使用 html-webpack-inline-chunk-plugin

npm i html-webpack-inline-chunk-plugin

var HTMLInlieChunk = require('html-webpack-inline-chunk-plugin')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        publicPath:'/'
    },
    plugin:[
        new htmlWebpackPlugin({
            filename:'index.html', // 不傳默認index.html
            template: './index.html',//傳入模板
            inject:true,//控制js\css是否插入到頁面
            minify: {
                collapseWhitespace:true //壓縮空格
            },
            chunks:['app']//指定chunks會把跟這個入口相關的chunks插入到頁面中
        })
        new webpack.mdtimize.CommonsChunkPlugin({
            name: 'manifest'
        })
        new HTMLInlieChunk({
            inlineChunks: ['manifest'] //把webpack生成的manifest提取到HTML文件script中，減少請求
        })
    ]
}

五、Webpack 環(huán)境配置

5.1 Webpack Watch Mode

webpack --watch

// 簡寫
webpack -w

//webpack.config.js

var webpack = require('wepback')
var PurifyWebpack = require('pruifycss-webpack')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpack = require('clean-webpacl-plugin')

var path = require('path')
var glob = rquire('glob-all')//處理多個路徑

var extractLess = new ExtractTextWebpackPlugin({
    filename: 'css/[name]-bundle-[hash:5].css'
})

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]-bundle-[hash:5].js'
    },
    module:{
        rules: [
            {
                test: /\.(css|less)$/,
                use:
                extractLess.extract({
                    // 提取css并不會自動加入到文檔中，需要在HTML手動加入css文件
                    fallback: {
                        loader: 'style-loader',
                        options: { 
                           //合并多個style為一個
                            singleton:true
                        }
                    },
                    // 處理css
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                               minimize:true,
                               modules: true,
                               // css模塊化
                               localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                        },
                        {
                            loader: 'less-loader'
                        },
                        {
                            loader: 'sass-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    // 合并雪碧圖
                                    require('postcss-sprites')({
                                        // 指定雪碧圖輸出路徑
                                        spritePath: 'dist/assets/imgs/sprites',
                                        retina: true // 處理蘋果高清retina 圖片命名需要 xx@2x.png,對應的圖片的css大小設置也要減小一半 
                                    })
                                ]
                            }
                        }
                    ]
                })
            }
        ]
    }
    plugin: [
        new CleanWebpack()
    ]
}

5.2 Webpack Dev Server

5.2.1 Dev Server

不能用來直接打包文件，Dev Server搭建本地開發(fā)，文件存在內(nèi)存中

特性

live reloading
路徑重定向
支持HTTPS
瀏覽器中顯示編譯錯誤
接口代理
模塊熱更新

dev server

inline
contentBase
port
histApiFllback
https
proxy
hot
openpage
lazy
overlay 開啟錯誤遮罩

使用

"script"{
    // 啟動
    "server": "webpack-dev-server --open" 
}

module.exports = {
    entry: {
        app: './src/app.js'
    },
    
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].[hash:5].js'
    },
    
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
       // historyApiFallback: true
        historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            rewrites: [
                {
                    from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
                    to: function(context){
                        return '/' + context.match[1] + context.match[2] + '.html'
                    }
                }
            ]
            ]
        }
    }
}

5.2.2 proxy代理遠程接口

代理遠程接口請求
http-proxy-middleware
devServer.proxy

module.exports = {
    entry: {
        app: './src/app.js'
    },
    
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].[hash:5].js'
    },
    
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
       // historyApiFallback: true
        historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            rewrites: [
                {
                    from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
                    to: function(context){
                        return '/' + context.match[1] + context.match[2] + '.html'
                    }
                }
            ]
            ]
        },
        proxy: {
            '/api': {
                target: 'https://blog.poetries.top',//代理到服務器
                changeOrigin:true,
                logLevel: 'debug',
                // pathRewite: { },
                headers:{}// 請求頭
            }
        }
    }
}

5.2.3 模塊熱更新

保持應用的數(shù)據(jù)狀態(tài)
節(jié)省調(diào)試時間
不需要刷新
devServer.hot
webpack.HotModleReplacementPlugin
webpack.NamedModulesPlugin 看到模塊更新的路徑

Module Hot Reloading

module.hot
module.hot.accept

module.exports = {
    entry: {
        app: './src/app.js'
    },
    
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].[hash:5].js'
    },
    
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
       // historyApiFallback: true
        historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            rewrites: [
                {
                    from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
                    to: function(context){
                        return '/' + context.match[1] + context.match[2] + '.html'
                    }
                }
            ]
            ]
        },
        hot:true,//開啟模塊熱更新
        hotOnly:true,
        proxy: {
            '/api': {
                target: 'https://blog.poetries.top',//代理到服務器
                changeOrigin:true,
                logLevel: 'debug',
                // pathRewite: { },
                headers:{}// 請求頭
            }
        }
    },
    plugin:[
        // 模塊熱更新插件
        new webpack.HotModuleReplacementPlugin()
        
        // 輸出熱更新路徑
        new webpack.NamedModulesPlugin()
    ]
}

模塊熱更新配置

需要通過module.hot

f (module.hot) {
  module.hot.accept('./library.js', function() {
    // Do something with the updated library module...
  })
}

5.2.4 開啟調(diào)試SourceMap

Source Map調(diào)試

把生成以后代碼和之前的做一個映射

開啟Source Map方式

JS Source Map設置

develpoment

eval
eval-source-map
cheap-eval-source-map
cheap-module-eval-source-map

推薦使用cheap-module-source-map

production

source-map
hidden-source-map
nosource-source-map

推薦使用source-map

CSS Source Map設置

改變loader的options選項

css-loader.options.soucemap
less-loader.options.soucemap
sass-loader.options.soucemap

module.exports = {
    entry: {
        app: './src/app.js'
    },
    
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].[hash:5].js'
    },
    module: {
        // 處理css的每個loader加上sourceMap: true 觀察css樣式 可以看到對應的行號
        rules: [
            test: /\.less/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        // singleton: true,會導致css的sourceMap不生效
                        //singleton: true,
                        sourceMap: true
                    }
                },
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        sourceMap: true
                    }
                },
                {
                    loader: 'less-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]
        ]
    },
    devtool: 'cheap-module-eval-source-map',//開啟sourcemap
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
       // historyApiFallback: true
        historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            rewrites: [
                {
                    from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
                    to: function(context){
                        return '/' + context.match[1] + context.match[2] + '.html'
                    }
                }
            ]
            ]
        },
        hot:true,//開啟模塊熱更新
        hotOnly:true,
        overlay:true,//錯誤提示
        proxy: {
            '/api': {
                target: 'https://blog.poetries.top',//代理到服務器
                changeOrigin:true,
                logLevel: 'debug',
                // pathRewite: { },
                headers:{}// 請求頭
            }
        }
    },
    plugin:[
        // 模塊熱更新插件
        new webpack.HotModuleReplacementPlugin()
        
        // 輸出熱更新路徑
        new webpack.NamedModulesPlugin()
    ]
}

5.2.5 設置 ESLint 檢查代碼格式

eslint
eslint-loader
esling-plugin-html
eslint-frindly-formatter 友好提示錯誤

配置eslint

wepback config 新增loader
.eslintrc或者在package.json的eslintConfig中寫

配置eslint的規(guī)范，推薦使用JavaScript standard style(https://standardjs.com)

需要安裝以下插件

eslint-config-standard
eslint-plugin-promise
eslint-plugin-standard
eslint-plugin-import
eslint-plugin-node

eslint-loader

options.failOnWarning 出現(xiàn)警告
options.failOnError
options.formatter
options.outputReport

設置 devServer.overlay在瀏覽器中看提示的錯誤

// .eslintrc

module.exports = {
    root: true,
    extends: 'standard',
    plugins: [],
    env: {
        browsers: true,
        node: true // node環(huán)境
    },
    rules: {
        // 縮進
        indent: ['error', 4],
        
        //換行
        "eol-last": ['error', 'never']
    }
}

module.exports = {
    entry: {
        app: './src/app.js'
    },
    
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].[hash:5].js'
    },
    module: {
        // 處理css的每個loader加上sourceMap: true 觀察css樣式 可以看到對應的行號
        rules: [
            {
                test: /\.js$/,
                include: [path.resolve(__dirname,'src/')],
                exclude: [path.resolve(__dirname,'src/libs')],
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    },
                    //eslint-loader需要在babel-loader之后處理
                    {
                        loader: 'eslint-loader',
                        options: {
                            formatter: require('eslint-frindly-formatter')
                        }
                    }
                ]
            },
            {
                test: /\.less/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            // singleton: true,會導致css的sourceMap不生效
                            //singleton: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',//開啟sourcemap
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
       // historyApiFallback: true
        historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            rewrites: [
                {
                    from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
                    to: function(context){
                        return '/' + context.match[1] + context.match[2] + '.html'
                    }
                }
            ]
            ]
        },
        hot:true,//開啟模塊熱更新
        hotOnly:true,
        overlay:true,//錯誤提示
        proxy: {
            '/api': {
                target: 'http://blog.poetries.top',//代理到服務器
                changeOrigin:true,
                logLevel: 'debug',
                // pathRewite: { },
                headers:{}// 請求頭
            }
        }
    },
    plugin:[
        // 模塊熱更新插件
        new webpack.HotModuleReplacementPlugin()
        
        // 輸出熱更新路徑
        new webpack.NamedModulesPlugin()
    ]
}

5.2.6 區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境

開發(fā)環(huán)境

模塊熱更新
sourceMap
接口代理
代碼規(guī)范檢查

生產(chǎn)環(huán)境

提取公共代碼
壓縮
文件壓縮或base64編碼
去除無用的代碼

共同點

入口一致
loader處理
解析配置一致

使用webpack-merge合并公共配置

webpack.dev.conf.js
wepback.prod.conf.js
webpack.common.conf.js

"scripts":{
    "server": "wepback-dev-server --env development --open --config build/webpack.common.config.js",
    "build": "wepback --env production --open --config build/webpack.common.config.js"
}

公共配置 build/webpack.common.conf.js

const merge = require('webpack-merge')
const webpack = require('webpack')
const path = require('path')

const chalk = require('chalk')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')

const developmentConfig = require('./webpack.dev.conf')
const productionConfig = require('./webpack.prod.conf')


// 根據(jù)環(huán)境變量生成配置
const generateConfig = env =>{
    const extractLess = new ExtractTextWebpackPlugin({
        filename: 'css/[name]-bundle-[hash:5].css'
    })
    const scriptLoader = [
      'babel-loader'
    ].concat(env === 'production'
      ? []
      : [{
          loader: 'eslint-loader',
          options: {
              formatter: require('eslint-friendly-formatter')
          }
      }]
    )
    const cssLoaders = [
      {
          loader: 'css-loader',
          options: {
              importLoaders: 2,
              sourceMap: env==='development'
          }
      },
      {
        loader: "postcss-loader",
        options: {
          ident: "postcss",
          sourceMap: env==='development',
          plugins: [

          ].concat(env==='production'
            ? require('postcss-sprites')({
              spritePath: 'build/assets/imgs/sprites',
              retina: true
            })
            :[]
          )
        }
      },
      {
          loader: 'less-loader',
          options: {
              sourceMap: env==='development'
          }
      }
    ]
    const styleLoader = env === 'production'
          // 線上需要提取css成文件
          ? extractLess.extract({
            fallback:'style-loader',
            use: cssLoaders
          })
          : ['style-loader'].concat(cssLoaders)

    const fileLoader = env === 'development'
        ? [{
            loader: 'file-loader',
            options: {
              name: '[name]-[hash:5].[ext]',
              outputPath: 'assets/imgs/'
            }
          }]
        : [{
          loader: 'url-loader',
          options: {
            name: '[name]-[hash:5].[ext]',
            limit: 1000,//1k
            outputPath: 'assets/imgs/'
          }
        }]

    return {
      entry: {
          app: './src/index.js'
      },
      output: {
          path: path.resolve(__dirname, '../build'),
          publicPath: '/',
          filename: '[name]-bundle-[hash:5].js'
      },
      // 路徑解析
      resolve: {
          alias: {
              // jquery$: path.resolve(__dirname, '../src/libs/jquery.min.js')
          }
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  include: [path.resolve(__dirname,'../src/')],
                  exclude : /node_modules/,
                  use: scriptLoader
              },
              {
                  test: /\.(less|css|scss)/,
                  use: styleLoader
              },
              {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: fileLoader.concat(env==='production'
                  ? [
                    {
                      loader: 'img-loader',
                      options: {
                        pngquant: {
                          quality: 80
                        }
                      }
                    }
                  ]
                  : []
                )
              },
              {
                test: /\.(eot|woff2?|ttf|svg)$/,
                use: fileLoader
              }
          ]
      },
      plugins: [
        extractLess,

        new ProgressBarPlugin({
          format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
          clear: false
        }),
        new HtmlWebpackPlugin({
                inject: true,
                template: path.resolve(__dirname,'../public/index.html'),
          minify: {
            collapseWhitespace: true
          }
            }),
        new webpack.ProvidePlugin({
          $: 'jquery'
        })
      ]
    }
}


module.exports = env =>{
  const config = env==='development' ? developmentConfig : productionConfig
  return merge(generateConfig(env),config)
}

開發(fā)環(huán)境配置 build/webpack.dev.conf.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
    devtool: 'cheap-module-eval-source-map',//開啟sourcemap
    devServer: {
        port: 9001,
        // 輸入任意路徑都不會出現(xiàn)404 都會重定向
        historyApiFallback: true,
        // historyApiFallback: {
            //從一個確定的url指向?qū)奈募?            //rewrites: [
            //    {
            //        from: '/pages/a',// 可以寫正則
           //         to: '/pages/a.html'
            //    }
            // rewrites: [
            //     {
            //         from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/
            //         to: function(context){
            //             return '/' + context.match[1] + context.match[2] + '.html'
            //         }
            //     }
            // ]
        // },
        hot:true,//開啟模塊熱更新
        hotOnly:true,
        overlay:true,//錯誤提示
        proxy: {
            '/api': {
                // target: 'http://blog.poetries.top',//代理到服務器
                changeOrigin:true,
                logLevel: 'debug',
                // pathRewite: { },
                headers:{}// 請求頭
            }
        }
    },
    plugins: [
      // 模塊熱更新插件
       new webpack.HotModuleReplacementPlugin(),

       // 輸出熱更新路徑
       new webpack.NamedModulesPlugin()
    ]
}

生產(chǎn)環(huán)境配置 build/webpack.prod.conf.js

const webpack = require('webpack')
const PurifyCssWebpack = require('purifycss-webpack')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const path = require('path')
const glob = require('glob-all')//處理多個路徑

module.exports = {
  plugins: [
    new PurifyCssWebpack({
      paths: glob.sync([
        './*html',
        './src/*js'
      ])
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    new HtmlWebpackPlugin({
      inlineChunks: ['manifest']
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new CleanWebpackPlugin(['../build'])
  ]
}

5.3 使用 middleware 來搭建開發(fā)環(huán)境

可以更靈活配置,需要以下插件搭建

Express or koa
webpack-dev-middleware
webpack-hot-middleware 熱更新
http-proxy-middleware 代理
connect-history-api-fallback 地址rewrite
opn 命令工具打開瀏覽器頁面

// build/server.js

/**
 * 使用middleware搭建服務:更靈活配置,不在使用webpack-dev-server
 * @type {[type]}
 */

const express = require('express')
const webpack = require('webpack')
const opn = require('opn')

const app = express()
const port = 3000

//把express和配置聯(lián)合起來 需要用到middleware
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const proxyMiddleware = require('http-proxy-middleware')
const historyApiFallback = require('connect-history-api-fallback')

const config = require('./webpack.common.conf')({env:'development'})
const compiler = webpack(config) //給express使用

const proxyTable = require('./proxy')

for(let context in proxyTable){
  app.use(proxyMiddleware(context, proxyTable[context]))
}

app.use(historyApiFallback(require('./historyfallback')))

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))

app.use(webpackHotMiddleware(compiler))


app.listen(port, function(){
  console.log('> Ready on:' + port)
  opn('http://localhost:' + port)
})

六、webpack實戰(zhàn)場景

詳情 http://blog.poetries.top/2018/11/21/webpack-review/#%E5%85%AD%E3%80%81webpack%E5%AE%9E%E6%88%98%E5%9C%BA%E6%99%AF

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

webpack總結篇

一、webpack簡介

1.1 版本更迭

1.2 功能進化

二、webpack核心概念

2.1 Entry

2.2 Output

2.3 Loaders

2.3.1 常用Loader

2.4 Plugins

2.4.1 常用plugins

2.5 名詞

三、初探 webpack

3.1 使用babel打包es6

3.1.1 編譯 ES 6/7

3.2 打包 Typescript

3.3 提取 js 的公用代碼

3.4 代碼分割和懶加載

3.5 處理 CSS 和 CSS 模塊化

3.6 PostCSS in Webpack

3.7 Tree shaking

3.7.1 JS Tree shaking

3.7.2 CSS Tree shaking

四、由淺入深Webpack

4.1 文件處理

4.1.1 圖片處理

4.1.2 處理雪碧圖、base64、壓縮圖片

4.1.2 處理字體文件

4.1.3 處理第三方 JS 庫

4.2 HTML in webpack(自動生成HTML)

4.2.1 生成 HTML

4.2.2 HTML 中引入圖片

4.2.3 配合優(yōu)化

五、Webpack 環(huán)境配置

5.1 Webpack Watch Mode

5.2 Webpack Dev Server

5.2.1 Dev Server

5.2.2 proxy代理遠程接口

5.2.3 模塊熱更新

5.2.4 開啟調(diào)試SourceMap

5.2.5 設置 ESLint 檢查代碼格式

5.2.6 區(qū)分開發(fā)環(huán)境 和 生產(chǎn)環(huán)境

5.3 使用 middleware 來搭建開發(fā)環(huán)境

六、webpack實戰(zhàn)場景

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

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

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

一、webpack簡介

三、初探 webpack

四、由淺入深Webpack

4.1.2 處理雪碧圖、base64、壓縮圖片

五、Webpack 環(huán)境配置

5.2.6 區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境