webpack學習教程小記

時間  2019-11-10
標籤 webpack 學習 教程 简体版
原文   原文鏈接

webpack小記

webpack配置中的 entry與output

entry :javascript

entry 是表示打包的入口文件、就是說從哪一個文件開始打包css

  • webpack 的配置有三種形式:html

    • 字符串形式java

    • 數組形式node

    • 對象形式jquery

entry:'./main.js'

將mina.js 和jquery.js 打包到bundle.js 輸出webpack

//將mina.js 和jquery.js 打包到bundle.js 輸出
{
  entry: ['main.js', 'jquery.js'],
  output: {
    path: './dist',
    filename: "bundle.js"
  }
}

設置多個打包目標文件。每一對鍵值對都對應着一個入口文件git

entry: {   
    main: 'main.js',  
    a: 'a.js'   
    },   
    output: {  
    path: './dist/',   
    filename: '[name].js'  
    }

outputgithub

output裏filename有三個值web

  • [name]是文件名字是entry的鍵值。

  • [hash]是md5加密的值。

  • [chunkhash]這裏是做爲版本號使用。

module.exports = {
    entry: {
        app: './main.js'
    },
    output: {
        filename: '[name]-[hash].js',
        path: __dirname + '/dist'
    }
};

plugin插件配置

使用install html-webpack-plugin插件，安裝npm install html-webpack-plugin --save-dev，能夠生產出對應的打包html輸出、而且能夠設計模板頁面的一些變量參數、

plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            title:"webpack test demo"
        })
    ]

  • title: 用來生成頁面的 title 元素

  • filename: 輸出的 HTML 文件名，默認是 index.html, 也能夠直接配置帶有子目錄。

  • template: 模板文件路徑，支持加載器，好比 html!./index.html

  • inject: true | 'head' | 'body' | false ,注入全部的資源到特定的 template 或者

  • templateContent 中，若是設置爲 true 或者 body，全部的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。

  • favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。

  • minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出

  • hash: true | false, 若是爲 true, 將添加一個惟一的 webpack 編譯 hash 到全部包含的腳本和 CSS 文件，對於解除 cache 頗有用。

  • cache: true | false，若是爲 true, 這是默認值，僅僅在文件修改以後纔會發佈文件。

  • showErrors: true | false, 若是爲 true, 這是默認值，錯誤信息會寫入到 HTML 頁面中

  • chunks: 容許只添加某些塊 (好比，僅僅 unit test 塊)

  • chunksSortMode: 容許控制塊在添加到頁面以前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'

  • excludeChunks: 容許跳過某些塊，(好比，跳過單元測試的塊)

chunks說明

  • 能夠將不一樣的打包chunk 加載到不一樣的頁面中去，當index.html 首頁須要common.js 和index.js時可用chunk

new htmlWebpackPlugin({
      filename: __dirname + '/dist/index.html',
      template: 'html-withimg-loader!' +"./index.html",
      chunks:['index','main']
    }),

代碼壓縮:

webpack 自帶了一個壓縮插件 UglifyJsPlugin，只須要在plugins配置文件中引入便可使用、壓縮JS 代碼

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
        }
})

配置壓縮css代碼

{
loader: "css-loader",
options: {
    minimize: true //css壓縮
    }
}

webpack對樣式的處理

須要引入css-loader和style-loader，其中css-loader用於解析，而style-loader則將解析後的樣式嵌入js代碼。

{
  module: {
    loaders: [
      { test: /\.$/, loader: "style-loader!css-loader!less-loader" }
    ]
  }
}

將樣式抽取出來爲獨立的文件

將樣式抽取成獨立的文件。使用的插件就是extract-text-webpack-plugin

rules: [{
       test: /\.css$/,
       use: ExtractTextPlugin.extract({
           fallback: "style-loader",
           use: [{
               loader: "css-loader",
               options: {
                   // modules: true // 設置css模塊化,
                   minimize: true //css壓縮
               }
           }, {
               loader: "postcss-loader",
               // 在這裏進行配置，也能夠在postcss.config.js中進行配置，
               options: {
                   plugins: function() {
                       return [require("autoprefixer")];
                   }
               }
           }]
       })
   }]

樣式壓縮

壓縮代碼咱們可使用webpack的內置插件UglifyJsPlugin來作，它既能夠壓縮js代碼也能夠壓縮css代碼。

plugins: [
  ...
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  ...
]

圖片文件字體文件壓縮

圖片文件壓縮成base64 能夠設置被壓縮圖片的大小才什麼範圍內才進行壓縮limit: 1000,

{
     test: /\.(png|gif|jpe?g)$/,
     loader: "url-loader",
     query: {
         /*
          *  limit=10000 ： 10kb
          *  圖片大小小於10kb 採用內聯的形式，不然輸出圖片
          * */
         limit: 1000,
         name: "images/[name]-[hash:8].[ext]"
     }
 }, {
     //文件加載器，處理文件靜態資源
     test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
     loader: 'file-loader?name=./fonts/[name]-[hash:8].[ext]'
 }

其實並不能說是在壓縮css代碼，本質來講仍是壓縮js代碼，再將這塊代碼輸出到css文件中。

如下爲一個demo配置:webpack.config.js

const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: {
        main: "./src/main.js"
    },
    output: {
        filename: "js/[name].js",
        path: __dirname + "/dist/"
    },
    module: {
        /* 在webpack2.0版本已經將 module.loaders 改成 module.rules 爲了兼容性考慮之前的聲明方法任然可用，同時鏈式loader(用!鏈接)只適用於module.loader
            同時-loader不可省略 */
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                            loader: "css-loader",
                            options: {
                                // modules: true // 設置css模塊化,
                                //  minimize: true //css壓縮
                            }
                        },
                        {
                            loader: "postcss-loader",
                            // 在這裏進行配置，也能夠在postcss.config.js中進行配置，
                            options: {
                                plugins: function() {
                                    return [require("autoprefixer")];
                                }
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(png|gif|jpe?g)$/,
                loader: "url-loader",
                query: {
                    /*
                     *  limit=10000 ： 10kb
                     *  圖片大小小於10kb 採用內聯的形式，不然輸出圖片
                     * */
                    limit: 1000,
                    name: "images/[name]-[hash:8].[ext]"
                }
            },
            {
                //文件加載器，處理文件靜態資源
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=./fonts/[name]-[hash:8].[ext]'
            },
            {
                test: /\.styl(us)?$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function() {
                                    return [require("autoprefixer")];
                                }
                            }
                        },
                        "stylus-loader"
                    ]
                })
            },
            {
                test: /\.js$/,
                loader: "babel-loader", //此處不能用use，不知道爲啥
                exclude: /node_modules/ //須要排除的目錄
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: "index.html",
            title: "webpack test demo"
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("css/[name].css")
    ]
};
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程