webpack 4 練習

第一階段：管理資源學習

[ 版本version:]  1.0.0

1.基本的安裝與配置

2.經過loader引入其餘類型文件

3.顯示依賴

 

第二階段：輸出管理

[ 版本version]  1.1.0

上面我一直是在手動的管理輸出文件，dist下的index.html。能夠想象若是項目變更復雜的話如此作法確定會帶來不少的不方便。該如何解決呢？

1.html-webpack-plugin會生成一個新的index.html輸出文件,並自動將生成的bundle添加到其中

2.clean-webpack-plugin清理輸出的文件夾

3.webpack 經過 manifest，能夠追蹤全部模塊到輸出 bundle 之間的映射

第三階段：開發環境

[ 版本version]  1.2.0

1.爲了方便追蹤報錯，使用source map將編譯後的代碼映射到原代碼中

2.webpack-dev-server修改文件後自動編譯且主動刷新瀏覽器（編譯是保存再內存中，不會寫出）

第四階段：模塊熱替換

[ 版本version]  1.3.0

如今的開發大多都是單頁的模塊化開發，若是頁面的某個模塊發生改變，通常經過重啓服務來查看效果。這就佔用了較大的資源和時間，該如何解決呢？

1.經過修改webpack-dev-server的配置，在項目運行時更新全部類型的模塊。

第五階段：生產環境配置

[ 版本version]  1.4.0

1.生產環境和開發環境分別配置webpack配置，webpack-merge來寫不重複的代碼

2.NODE_ENV 是一個由 Node.js 暴露給執行腳本的系統環境變量，process.env.NODE_ENV可用來判斷環境是否爲production

第六階段：代碼分離

[ 版本version]  1.5.0

如今的代碼打包後都是放在一個bundle中，這意味着在加載時須要一次請求所有的代碼，這明顯示不合理。正常的代碼應該是按功能或需求分開放在不一樣的代碼文件中，而後按需加載，減小加載的時間。

1.在entry入口中手動配置分離代碼。

SplitChunksPlugin剔除重複的代碼，wepack配置：

  optimization:{
    splitChunks:{
      chunks:'all'
   }
 }

2.動態代碼拆分，使用符合ECMA提案的import語法來實現動態導入。

output: {
    filename:'[name].bundle.js',
    chunkFilename:'[name].bundle.js',//分離
    path: path.resolve(__dirname, 'dist')
 },

第七階段：緩存的管理

[ 版本version]  1.6.0

代碼修改發佈後，因爲瀏覽器的緩存功能，可能不會去服務器上獲取新的代碼。這是就須要用戶去強制刷新和清理緩存。這樣的用戶體驗很很差，該如何解決呢？

1.經過配置，將不常修改的依賴如react,lodash等庫單獨打包，而可能頻繁改動的代碼再打包。當代碼內容修改後文件名的hash值發生改變，從而保證瀏覽器會從新去服務器獲取。

plugins:[
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns:['**/*','dist']
   }),
    new HtmlWebpackPlugin({
        titile:'Caching'
   }),
    new webpack.HashedModuleIdsPlugin(),
 ],
  output: {
    filename:'[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
 },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
       }
     }
   }
 }

第八階段：建立一個npm環境

[ 版本version]  1.7.0

開發到必定階段，使用了不少別人的包。到我寫到此處時，如今的npm包總數量也達到937843個，在開發的過程當中絕大多數需求都能找到對應的包。但面對實際開發中不可預測的業務與需求，有時咱們也很難再如此海量的npm包中找到一款適合本身的。這時就難免生出本身去開發一個npm的想法。如下就是在webpack下搭建一個npm開發環境。

1.不打包咱們開發中用到的第三方包，而是經過外部控件來要求用戶加載第三方包。

  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_'
   }
 }

2.爲了能兼容不一樣的環境（CommonJS,AMD,Node.js,全局變量）,須要暴露library.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-numbers.js',
    library: 'webpackNumbers'
 },

第九階段：shimming的使用

[ 版本version]  1.8.0

當你但願 polyfill 瀏覽器功能以支持更多用戶時,但只想將這些polyfills提供到須要修補的瀏覽器，按需加載。

1.讓咱們把 import 放入一個新文件，並加入 whatwg-fetch polyfill

2.在webpack的配置文件，entry中添加polyfills: './src/polyfills.js'

3.判斷須要polyfill的方法是否在用戶瀏覽器中存在，加載polyfills

第十階段：TypeScript環境

[ 版本version]  1.9.0

1.首先安裝TypeScript的編譯器（typescript）和loader(ts-loader)；

2.添加一個tsconfig.js配置文件，支持jsx,並將TypeScript編譯爲ES5;

3.添加webpack的基礎配置

  module: {
    rules: [
     {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
     }
   ]
 },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
 },

 以上全部代碼都已按版本放在了github上：

https://github.com/liuguang2016/webpack-demo