欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

為什么我們要做三份 Webpack 配置文件

 更新時間:2017年09月18日 17:40:11   作者:Henry  
前端從開發(fā)到部署前都離不開 Webpack 的參與,本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案,同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。

在知乎上我們常常會看到有同學(xué)發(fā)問:BAT 等大型網(wǎng)站的前端工程是如何組織管理的?這的確是一個可以發(fā)散的很廣的 Q&A,我想如果要我回答這個問題,不如先從 Webpack 配置說起。

時至今日,Webpack 已經(jīng)成為前端工程必備的基礎(chǔ)工具之一,不僅被廣泛用于前端工程發(fā)布前的打包,還在開發(fā)中擔(dān)當本地前端資源服務(wù)器(assets server)、模塊熱更新(hot module replacement)、API Proxy 等角色,結(jié)合 ESLint 等代碼檢查工具,還可以實現(xiàn)在對源代碼的嚴格校驗檢查。

正如上文中提到的,前端從開發(fā)到部署前都離不開 Webpack 的參與,而 Webpack 的默認配置文件只有一個,即 webpack.config.js,那么問題來了,開發(fā)期和部署前應(yīng)該使用同一份 Webpack 配置嗎?答案肯定是否定的,既然 webpack.config.js 是一個 JS 文件,我們當然可以在文件里寫 JavaScript 業(yè)務(wù)邏輯,通過讀取環(huán)境變量 NODE_ENV 來判斷當前是在開發(fā)(dev)時還是最終的生產(chǎn)環(huán)境(production),然而很多同學(xué)習(xí)慣把這兩者的配置都混寫在根目錄下的 webpack.config.js,通過很多零散的 if...else 來“臨時”決定某一個 plugin 或者某一個 loader 的配置項,隨著 loaders 和 plugins 的不斷增加,久而久之 webpack.config.js 變得原來越隆長,代碼的可讀性和可維護性也大大下降。

我想通過本文來介紹一種用 3 個 JS 文件來配置 Webpack 的方法,這里借鑒了很多開源項目的配置,同時也結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案。

        本文中提及的配置基于 Webpack 2 或以上,建議使用 3.0 及以上版

開發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)別

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

 ·NODE_ENV 為 development

 ·啟用模塊熱更新(hot module replacement)

 ·額外的 webpack-dev-server 配置項,API Proxy 配置項

 ·輸出 Sourcemap

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

 ·NODE_ENV 為 production

 · 將 React、jQuery 等常用庫設(shè)置為 external,直接采用 CDN 線上的版本

 · 樣式源文件(如 css、less、scss 等)需要通過 ExtractTextPlugin 獨立抽取成 css 文件

 · 啟用 post-css

 · 啟用 optimize-minimize(如 uglify 等)

 ·中大型的商業(yè)網(wǎng)站生產(chǎn)環(huán)境下,是絕對不能有 console.log() 的,所以要為 babel 配置Remove console transform

這里需要說明的是因為開發(fā)環(huán)境下啟用了 hot module replacement,為了讓樣式源文件的修改也同樣能被熱替換,不能使用 ExtractTextPlugin,而轉(zhuǎn)為隨 JS Bundle 一起輸出。

你需要三份配置文件

1. webpack.base.config.js

在 base 文件里,你需要將開發(fā)環(huán)境和生產(chǎn)環(huán)境中通用的配置集中放在這里:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// 配置常量
// 源代碼的根目錄(本地物理文件路徑)
const SRC_PATH = path.resolve('./src');
// 打包后的資源根目錄(本地物理文件路徑)
const ASSETS_BUILD_PATH = path.resolve('./build');
// 資源根目錄(可以是 CDN 上的絕對路徑,或相對路徑)
const ASSETS_PUBLIC_PATH = '/assets/';
module.exports = {
 context: SRC_PATH, // 設(shè)置源代碼的默認根路徑
 resolve: {
  extensions: ['.js', '.jsx'] // 同時支持 js 和 jsx
 },
 entry: {
  // 注意 entry 中的路徑都是相對于 SRC_PATH 的路徑
  vendor: './vendor',
  a: ['./entry-a'],
  b: ['./entry-b'],
  c: ['./entry-c']
 },
 output: {
  path: ASSETS_BUILD_PATH,
  publicPath: ASSETS_PUBLIC_PATH,
  filename: './[name].js'
 },
 module: {
  rules: [
   {
    enforce: 'pre', // ESLint 優(yōu)先級高于其他 JS 相關(guān)的 loader
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'eslint-loader'
   },
   {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    // 建議把 babel 的運行時配置放在 .babelrc 里,從而與 eslint-loader 等共享配置
    loader: 'babel-loader'
   },
   {
    test: /\.(png|jpg|gif)$/,
    use:
    [
     {
      loader: 'url-loader',
      options:
      {
       limit: 8192,
       name: 'images/[name].[ext]'
      }
     }
    ]
   },
   {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use:
    [
     {
      loader: 'url-loader',
      options:
      {
       limit: 8192,
       mimetype: 'application/font-woff',
       name: 'fonts/[name].[ext]'
      }
     }
    ]
   },
   {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use:
    [
     {
      loader: 'file-loader',
      options:
      {
       limit: 8192,
       mimetype: 'application/font-woff',
       name: 'fonts/[name].[ext]'
      }
     }
    ]
   }
  ]
 },
 plugins: [
  // 每次打包前,先清空原來目錄中的內(nèi)容
  new CleanWebpackPlugin([ASSETS_BUILD_PATH], { verbose: false }),
  // 啟用 CommonChunkPlugin
  new webpack.optimize.CommonsChunkPlugin({
   names: 'vendor',
   minChunks: Infinity
  })
 ]
};

2. webpack.dev.config.js

這是用于開發(fā)環(huán)境的 Webpack 配置,繼承自 base:

const webpack = require('webpack');

// 讀取同一目錄下的 base config
const config = require('./webpack.base.config');

// 添加 webpack-dev-server 相關(guān)的配置項
config.devServer = {
 contentBase: './',
 publicPath: '/assets/'
};
// 有關(guān) Webpack 的 API 本地代理,另請參考 https://webpack.github.io/docs/webpack-dev-server.html#proxy 
config.module.rules.push(
 {
  test: /\.less$/,
  use: [
   'style-loader',
   'css-loader',
   'less-loader'
  ],
  exclude: /node_modules/
 }
);
// 真實場景中,React、jQuery 等優(yōu)先走全站的 CDN,所以要放在 externals 中
config.externals = {
 react: 'React',
 'react-dom': 'ReactDOM'
};

// 添加 Sourcemap 支持
config.plugins.push(
 new webpack.SourceMapDevToolPlugin({
  filename: '[file].map',
  exclude: ['vendor.js'] // vendor 通常不需要 sourcemap
 })
);
// Hot module replacement
Object.keys(config.entry).forEach((key) => {
 // 這里有一個私有的約定,如果 entry 是一個數(shù)組,則證明它需要被 hot module replace
 if (Array.isArray(config.entry[key])) {
  config.entry[key].unshift(
   'webpack-dev-server/client?http://0.0.0.0:8080',
   'webpack/hot/only-dev-server'
  );
 }
});
config.plugins.push(
 new webpack.HotModuleReplacementPlugin()
);
module.exports = config;

3. webpack.config.js

這是用于生產(chǎn)環(huán)境的 webpack 配置,同樣繼承自 base:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 讀取同一目錄下的 base config
const config = require('./webpack.base.config');
config.module.rules.push(
 {
  test: /\.less$/,
  use: ExtractTextPlugin.extract(
   {
    use: [
     'css-loader',
     'less-loader'
    ],
    fallback: 'style-loader'
   }
  ),
  exclude: /node_modules/
 }
);
config.plugins.push(
 // 官方文檔推薦使用下面的插件確保 NODE_ENV
 new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
 }),
 // 啟動 minify
 new webpack.LoaderOptionsPlugin({ minimize: true }),
 // 抽取 CSS 文件
 new ExtractTextPlugin({
  filename: '[name].css',
  allChunks: true,
  ignoreOrder: true
 })
);
module.exports = config;

現(xiàn)在在你的工程文件夾里應(yīng)該已經(jīng)有三個 Webpack 配置文件,它們分別是:

 · webpack.base.config.js
 
· webpack.dev.config.js

 · webpack.config.js

最后,你還需要在 package.json 里添加相應(yīng)的配置:

{
 ...
 "scripts": {
  "build": "webpack --optimize-minimize",
  "dev": "webpack-dev-server --config webpack.dev.config.js",
  "start": "npm run dev" // 或添加你自己的 start 邏輯
 },
 ...
}

和很多項目一樣,在開發(fā)環(huán)境下的時候,你需要使用 npm run dev 來啟動,而在生產(chǎn)環(huán)境中,則用 npm run build 來發(fā)布。
題外話,在真實場景中,我們不會直接使用 webpack-dev-server,而采用 express + webpack/webpack-dev-middleware,配置方法與上面所述的完全相同。

關(guān)于專欄

如果你喜歡這篇文章,就請關(guān)注我的專欄《前端零?!?/strong>,在這里我們一起聊一聊前端技術(shù)和前端工程。

關(guān)于作者

Henry,10 歲開始學(xué)習(xí)計算機編程,高二暑假獲得江蘇省青少年信息奧林匹克一等獎。2000 年開始自學(xué) JavaScript 及網(wǎng)頁制作,2006 年起正式開始從事前端開發(fā)工作,從此一干就是 10 多年。加入阿里巴巴前,曾在 SAP 中國研究院擔(dān)任智慧交通大數(shù)據(jù)產(chǎn)品經(jīng)理。

Github:MagicCube (Henry Li)

 小結(jié)

前端從開發(fā)到部署前都離不開 Webpack 的參與,本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案,同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。關(guān)于本文如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論