手動配置webpack

時間  2019-11-07
標籤 手動 配置 webpack 简体版
原文   原文鏈接

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。如今框架對於webpack都進行了css

集成，可是做爲開發的咱們，應該手動配置webpack，以此對其打包編譯原理有更詳細的認識。html

最簡單的webpack配置

webpack四個核心概念：node

  • 入口(entry)

入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，react

webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。webpack

  • 輸出(output)

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本es6

上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字web

段，來配置這些處理過程：npm

  • loader

loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠json

將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行數組

處理。

  • 插件(plugins)

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓

縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項

(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做

符來建立它的一個實例。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

HtmlWebpackPlugin

HtmlWebpackPlugin簡化了HTML文件的建立，以便爲你的webpack包提供服務。這對於在文件名中包含每次會隨着

編譯而發生變化哈希的 webpack bundle 尤爲有用。

安裝

npm install html-webpack-plugin@2.30.1 --save-dev
yarn add html-webpack-plugin@2.30.1 --dev

基本用法

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

會生成一個包含如下內容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

babel-loader

將es6代碼解析成es5代碼

安裝

npm install babel-loader babel-core babel-preset-env --save-dev
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev

基本使用

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

babel-preset-react

安裝

yarn add babel-preset-react@6.24.1 --dev

基本使用

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react']
          }
        }
      }
    ]
},

style-loader css-loader

爲了從 JavaScript 模塊中 import 一個 CSS 文件，須要在 module 配置中 安裝並添加 style-loader和

css-loader。

安裝

npm install --save-dev style-loader css-loader
yarn add style-loader@0.19.1  css-loader@0.28.8 --dev

基本使用

const path = require('path');

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

ExtractTextWebpackPlugin

它會將全部的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件。所以，你的樣式將不

再內嵌到 JS bundle 中，而是會放到一個單獨的 CSS 文件（即 styles.css）當中。 若是你的樣式文件大小較

大，這會作更快提早加載，由於 CSS bundle 會跟 JS bundle 並行加載。

安裝

npm install --save-dev extract-text-webpack-plugin@1.0.1
 yarn add extract-text-webpack-plugin@3.0.2 --dev

基本使用

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

sass-loader

node-sass 和 webpack 是 sass-loader 的 peerDependency，所以可以精確控制它們的版本。

安裝

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

基本使用

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //若是須要，能夠在 sass-loader 以前將 resolve-url-loader 連接進來
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //若是想要傳入選項，你能夠這樣作：
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

font-awesome

圖片描述

Font Awesome 字體提供了可縮放矢量圖標,它能夠被定製大小、顏色、陰影以及任何能夠用CSS的樣式。webpack中配置字體圖標前須要提早引入font-awesome庫，安裝也很簡單:

yarn add font-awesome

url-loader

處理圖片、字體圖標，url-loader 功能相似於 file-loader，可是在文件大小（單位 byte）低於指定的限制時，能夠返回一個 DataURL。

安裝

yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

基本使用

module.exports = {
  module: {
    rules: [
    // 圖片的處理
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      // 字體圖標的處理
      {
            test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }

                }
            ]
      }
    ]
  }
}

CommonsChunkPlugin

CommonsChunkPlugin 插件，是一個可選的用於創建一個獨立文件(又稱做 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊。

經過將公共模塊拆出來，最終合成的文件可以在最開始的時候加載一次，便存到緩存中供後續使用。這個帶來頁面速度上的提高，由於瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。

new webpack.optimize.CommonsChunkPlugin(options);

 // 提出公共模塊
new webpack.optimize.CommonsChunkPlugin({
    // (公共 chunk(commnon chunk) 的名稱)
    name: 'common',
    // (公共chunk 的文件名)
    filename: 'js/base.js'
})

webpack-dev-server

webpack-dev-server 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)。

安裝

yarn add webpack-dev-server@2.9.7 --dev

基本使用

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
     devtool: 'inline-source-map',
     devServer: {
       // contentBase: './dist',
       // 修改端口號
       port: 8086
   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

完整版webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'js/app.js'
    },
    module: {
        rules: [
            // react(jsx)處理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            // css處理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // scss處理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            // 圖片的處理
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    }
                }]
            },
            //字體圖標的處理
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    }

                }]
            }
        ]
    },
    plugins: [
        // 處理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 獨立css文件
        new ExtractTextPlugin("css/[name].css"),
        // 提出公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        // contentBase: './dist'
        port: 8086
    },
};

package.json

{
  "name": "react-e-commerce-manage",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "build": " node_modules/.bin/webpack"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "^4.9.3",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "16.2.0",
    "react-dom": "16.2.0"
  }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程