{"id":471,"date":"2022-08-30T21:55:46","date_gmt":"2022-08-30T13:55:46","guid":{"rendered":"http:\/\/gjweb.top\/?p=471"},"modified":"2022-08-30T21:55:47","modified_gmt":"2022-08-30T13:55:47","slug":"03-webpack%e4%bc%98%e5%8c%96%e7%af%87","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=471","title":{"rendered":"03.webpack\u4f18\u5316\u7bc7"},"content":{"rendered":"\n
  1. HMR (\u70ed\u66ff\u6362) \u529f\u80fd<\/li>
  2. soure-map \uff08\u7f16\u8bd1\u540e\u7684\u62a5\u9519\u63d0\u793a\uff09<\/li>
  3. noeof \/ enforce \uff08loader\u7684\u6267\u884c\u987a\u5e8f\uff09<\/li>
  4. webpack \u7f13\u5b58<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    1. HMR \u529f\u80fd<\/h2>\n\n\n\n

    \u5168\u79f0 hot Module replacement (\u70ed\u66ff\u6362)<\/p>\n\n\n\n

    \u4f5c\u7528: \u4e00\u4e2a\u6a21\u5757\u53d1\u751f\u53d8\u5316,\u53ea\u9700\u8981\u91cd\u65b0\u66f4\u65b0\u4e00\u4e2a\u6a21\u5757 ( \u4e0d\u7528\u5168\u90e8\u6253\u5305 )<\/p>\n\n\n\n

    \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n

    module.exports = {
        mode:\"development\"
        devServer:{
            hot:true \/\/ \u5f00\u542fHMR
        }
    }<\/code><\/pre>\n\n\n\n
    • \u6837\u5f0f\u6587\u4ef6 \u4f7f\u7528 style-loader \u5185\u90e8\u5b9e\u73b0\u4e86 HMR<\/li>
    • JS \u6587\u4ef6\uff1a \u9ed8\u8ba4\u4e0d\u652f\u6301 HMR, \u9700\u8981\u5728 js \u6587\u4ef6\u4e2d\u914d\u7f6e<\/li><\/ul>\n\n\n\n
      if(module.host){
          module.hot.accept(\".\/xxx.js\",()=>{
              xxx();
              .... xxx\u6587\u4ef6\u7684\u6267\u884c\u4ee3\u7801
          });
          ....
      }<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      2. soure-map<\/h2>\n\n\n\n
      \u7528\u4e8e\u7f16\u8f91\u4ee3\u7801\u7684\u9519\u8bef\u4fe1\u606f\u6620\u5c04\u6e90\u4ee3\u7801\u7684\u9519\u8bef\u4f4d\u7f6e<\/p>\n\n\n\n
      \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
      devtool:'soure-map'<\/code><\/pre>\n\n\n\n
      • \u5f00\u53d1\u73af\u5883\u63a8\u8350
        • eval-soure-map<\/li><\/ul><\/li>
        • \u751f\u4ea7\u73af\u5883\u63a8\u8350
          • nosoures-soure-map \u9690\u85cf\u6240\u6709\u4ee3\u7801<\/li>
          • hidden-soure-map \u9690\u85cf\u6e90\u7801<\/li>
          • soure-map \u5f00\u6e90\u4ee3\u7801,\u62a5\u9519\u5230\u6e90\u7801\u7684\u884c\u7ea7\u4f4d\u7f6e<\/li><\/ul><\/li><\/ul>\n\n\n\n
            \n\n\n\n
            3. oneof \/ enforce<\/h2>\n\n\n\n
            • enforce \u4f18\u5148\u52a0\u8f7d\u7684loader<\/li>
            • oneof \u6ede\u540e\u52a0\u8f7d\u7684loader<\/li><\/ul>\n\n\n\n
              \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
              module:{
                  rules:[
                      {
                          test:\/\\.xxx$\/,
                          laoder:\"xxx-loader\"
                          ...,
                          enforce:\"pre\"
                      },
                      {
                          omeof:[
                              {
                                  test:\/\\.xxx$\/,
                                  laoder:\"xxx-loader\"
                                  ...
                              }
                          ]
                      }
                  ]
              }<\/code><\/pre>\n\n\n\n
              \n\n\n\n
              4.webpack\u7f13\u5b58<\/h2>\n\n\n\n
              \u7f13\u5b58\u4e00<\/h3>\n\n\n\n
              babel \u7f13\u5b58<\/p>\n\n\n\n
              \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
              module:{
                  rules:[
                      {
                          test:\/\\.js$\/,
                          loader:\"babel-loader\",
                          options:{
                              cacheDirectory:true, \/\/ \u7b2c\u4e8c\u6b21\u6784\u5efa\u4e8b \u4f1a\u8bfb\u53d6\u4e4b\u524d\u7684\u7f13\u5b58
                              presets:[
                                  \"@babel\/preset-env\",
                                  {
                                      useBuiltIns:'usage',
                                      corejs:{
                                          version:3
                                      },
                                      targets:{
                                          chrome:\"60\"
                                      }
                                  }
                              ]
                          }
                      }
                  ]
              }<\/code><\/pre>\n\n\n\n
              \u6587\u4ef6\u7f13\u5b58<\/h3>\n\n\n\n
              \u65b9\u5f0f<\/th>\u5b9a\u4e49<\/th><\/tr><\/thead>
              hash<\/td>\u6bcf\u4e00\u6b21 webpack \u6784\u5efa\u90fd\u4f1a\u751f\u6210\u4e00\u4e2a\u65b0\u7684 hash \u503c\uff1b \u5982\u679c\u4e00\u4e2a\u6587\u4ef6\u88ab\u6539\u52a8\uff0c\u6240\u6709\u6587\u4ef6\u90fd\u4f1a\u88ab\u91cd\u65b0\u6253\u5305\uff08\u66f4\u65b0 hash\uff09<\/td><\/tr>
              chunkhash<\/td>\u6839\u636e chunk \u751f\u6210\u7684 hash \u503c\uff0c \u5982\u679c\u6253\u5305\u6765\u6e90\u540c\u4e00\u4e2a chunck \uff0c\u90a3\u4e48 hash \u662f\u4e00\u6837\u7684\uff1b \u4e3e\u4f8b\uff1a \u5982\u679c js \u4e2d \u5f15\u5165\u4e86 css \u6587\u4ef6\uff0c\u8fd9\u79cd\u60c5\u51b5\u5c31\u5c5e\u4e8e\u4e00\u4e2a hash \u503c\uff0c\u5f53\u6539\u53d8 css \u6587\u4ef6\uff0c js \u6587\u4ef6\u548c css \u6587\u4ef6\u5c06\u88ab\u4f1a\u91cd\u65b0\u6253\u5305<\/td><\/tr>
              contenthash<\/td>\u6839\u636e \u6587\u4ef6\u5185\u5bb9\u751f\u6210\u7684 hash\uff0c\u4e0d\u540c\u6587\u4ef6 hash \u503c\u4e00\u5b9a\u662f\u4e0d\u4e00\u6837\u7684\uff08\u4f5c\u4e3a\u751f\u4ea7\u73af\u5883\u7684\u6027\u80fd\u4f18\u5316\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
              \u7528\u4f8b<\/p>\n\n\n\n
              const {resolve} = require(\"path\")
              const MiniCssExtractWebpackPlugin = require(\"mini-css-extract-webpack-plugin\")
              module.exports={
                  output:{
                      filename:\"js\/index[contenthash:10].js\", \/\/ \u914d\u7f6e contenthash \u4fdd\u7559\u5341\u4f4d
                      path:resolve(__dirname,\"dist\")
                  },
                  module:{
                      rules:[
                          {
                              test:\/\\.css$\/,
                              use:[
                                  MiniCssExtractWebpackPlugin.loader,
                                  \"css-loader\"
                              ]
                          }
                      ]
                  },
                  plugins:[
                      new MiniCssExtractWebpackPlugin({
                          filename:\"css\/index[contenthas:10].css\" \/\/ \u914d\u7f6e contenthash \u4fdd\u7559\u5341\u4f4d
                      })
                  ],
                  mode:\"development\"
              }<\/code><\/pre>\n\n\n\n
              \u4f7f\u7528 node express \u6d4b\u8bd5 webpack \u7684\u7f13\u5b58<\/p>\n\n\n\n
              \u521b\u5efa server.js<\/p>\n\n\n\n
              const express = require(\"express\")
              \u200b
              const app = express();
              app.use(express.static(\"dist\",{maxAge:1000*3600})) \/\/ \u5f3a\u7f13\u5b58
              \u200b
              app.listen(3000)<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
              HMR (\u70ed\u66ff\u6362) \u529f\u80fd soure-map \uff08\u7f16\u8bd1\u540e\u7684\u62a5\u9519\u63d0\u793a\uff09 noeof \/ enforce \uff08load […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[],"class_list":["post-471","post","type-post","status-publish","format-standard","hentry","category-webpack5"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=471"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/471\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/471\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}