淺談Webpack(一)

時間 2019-11-12

標籤淺談 webpack 简体版

原文原文鏈接

webpack官方文檔css

什麼是webpack?

Webpack 是一個前端資源加載/打包工具(Module Bundler)，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。html

只須要相對簡單的配置就能夠提供前端工程化須要的各類功能，而且若是有須要它還能夠被整合到其餘好比 Grunt / Gulp 的工做流。前端

咱們能夠直接使用 require(XXX) 的形式來引入各模塊，即便它們可能須要通過編譯（好比JSX和sass），但咱們無須在上面花費太多心思，由於 webpack 有着各類健全的加載器（loader）在默默處理這些事情。node

爲何使用webpack?

如今的網站已經演化成 web app：react

一個頁面內依賴着愈來愈多的 JavaScript
現代瀏覽器有着愈來愈多的
雖然單頁內代碼愈來愈多，但全頁刷新愈來愈少

這意味着，客戶端有着愈來愈多的代碼。jquery

一個大的代碼庫須要良好的組織，這須要模塊系統來把代碼庫拆分紅模塊。webpack

加載器loader

loader是把一個資源文件做爲入參轉換爲另外一個資源文件的 node.js 函數。git

例如，能夠經過loader來讓 webpack 來加載 CoffeeScript 或 JSX 文件。github

若是loader發佈在 npm 上，那麼能夠經過下面的兩個命令來安裝web

$ npm install xxx-loader --save
$ npm install xxx-loader --save-dev

安裝webpack

$ npm install -g webpack

配置webpack

每一個項目下都必須配置有一個 webpack.config.js ，它就是一個配置項，告訴webpack它須要作什麼

看示例：

 1 const webpack = require('webpack');
 2 
 3 module.exports = {
 4   devtool: 'inline-source-map',
 5 
 6   //頁面入口文件配置
 7   entry: [
 8     './public/entry.jsx',
 9     'webpack-hot-middleware/client'
10   ],
11 
12   //入口文件輸出配置
13   output: {
14     path: __dirname,
15     publicPath: '/assets/',
16     filename: 'bundle.js'
17   },
18   module: {
19     //加載器配置
20     loaders: [{
21       test: /\.(js|jsx)$/,
22       exclude: /node_modules/,
23       loader: 'babel',
24       query: {
25         presets: ['es2015', 'react']
26       }
27     },
28     {
29       test:/\.css$/,
30       exclude:/node_modules/,
31       loader:'style!css'
32     },
33     {
34       test: /\.(woff|woff2)$/,
35       loader: 'url-loader?limit=10000&mimetype=application/font-woff'
36     },
37     {
38       test: /\.ttf$/,
39       loader: 'url?limit=10000&mimetype=application/octet-stream'
40     },
41     {
42       test: /\.eot$/,
43       loader: 'file'
44     },
45     {
46       test: /\.svg$/,
47       loader: 'url?limit=10000&mimetype=image/svg+xml'
48     },
49     {
50       test: require.resolve('jquery'),
51       loader: 'expose?$!expose?jQuery'
52     },
53     {
54       test: /\.(png|jpg)$/,
55       loader: 'url-loader?limit=8192'
56     }
57     ]
58   },
59 
60   //插件項 
61   plugins: [
62     // Webpack 1.0
63     new webpack.optimize.OccurenceOrderPlugin(),
64     // Webpack 2.0 fixed this mispelling
65     // new webpack.optimize.OccurrenceOrderPlugin(),
66     new webpack.HotModuleReplacementPlugin(),
67     new webpack.NoErrorsPlugin()
68   ]
69 };

一、plugins是插件項，這裏咱們用了三個插件方法：

webpack.optimize.OccurenceOrderPlugin(),webpack.HotModuleReplacementPlugin(),webpack.NoErrorsPlugin();

(1).webpack 給每一個模塊和分塊分配了 id 來識別它們。webpack 能夠經過new webpack.optimize.OccurenceOrderPlugin()給最經常使用的 id 分配最簡短的 id 來進行優化;

(2).webpack.NoErrorsPlugin()是選擇性的，主要的功能是當更改完的程序碼有語法錯誤時不要從新整理。當錯誤修改後，畫面會自動從新整理。

(3).webpack.HotModuleReplacementPlugin()：Webpack-dev-server結合後端服務器的熱替換配置

二、entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什麼名字的文件、存放到哪裏），其語法大體爲：

 1 {
 2     entry:{
 3         page1: "./page1",
 4         //支持數組形式，將加載數組中的全部模塊，但以最後一個模塊做爲輸出
 5         page2: ["./entry1", "./entry2"]
 6     },
 7     output:{
 8         path: "dist/js/page",
 9         filename: "[name].bundle.js"
10     }
11 }

該段代碼最終會生成一個 page1.bundle.js 和 page2.bundle.js，並存放到 ./dist/js/page 文件夾下。

三、module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理：

module: {
        //加載器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 來處理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 來編譯處理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }