webpack4的簡單配置

   webpack4的簡單配置            

1. 增長webpack-dev-server

devServer: {

    contentBase: path.resolve(__dirname, "build"),

    host: "localhost",

    port: 8000,

    compress: true,

  },

2. css in js (插入到header部分)

style-loader

3. css seaprate ()

new MiniCssExtractPlugin({

      filename: "./src/[name.[hash].css",

      chunkFilename: "csss/[id].css",

    }),

{
test: /\.css$/,
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader"
        ],
}

　　4. css/js自動插入html (HTMLWebpackPlugin)

new HtmlWebpackPlugin({

      template: "./src/index.html",

      filename: "index.html",

      hash: true,

      minify: {

        removeAttributeQuotes: true,

        removeComments: true,

      },

    }),

 

5。 js babel-loader負責轉化成es6/7

。babelrc-》聲明轉化規則

@babel/core 裏面有ast等東西

@babel/babel-preset 負責裏面有轉化規則

const test = (n)=>{

    return new Promise((resolve)=>{

        setTimeout(()=>{

            resolve(2)

        }, 1000);

    }).then(console.log);

}

最終轉化成了

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.css */ \"./src/index.css\");\n\nconsole.log('hello world');\nvar input = document.createElement('input');\ndocument.body.appendChild(input);\n\nvar test = function test(n) {\n  return new Promise(function (resolve) {\n    setTimeout(function () {\n      resolve(2);\n    }, 1000);\n  }).then(console.log);\n};\n\n//# sourceURL=webpack:///./src/index.js?");

 

但是arrowFunction轉化了 但是proimise沒有。 promise、map是api, 須要藉助babelpolyfill

確實轉化了， 可是打出來的包很大。

eval("\n\n__webpack_require__(/*! core-js/es6 */ \"./node_modules/core-js/es6/index.js\");\n\n__webpack_require__(/*! core-js/fn/array/includes */ \"./node_modules/core-js/fn/array/includes.js\");\n\n__webpack_require__(/*! core-js/fn/array/flat-map */ \"./node_modules/core-js/fn/array/flat-map.js\");\n\n__webpack_require__(/*! core-js/fn/string/pad-start */ \"./node_modules/core-js/fn/string/pad-start.js\");\n\n__webpack_require__(/*! core-js/fn/string/pad-end */ \"./node_modules/core-js/fn/string/pad-end.js\");\n\n__webpack_require__(/*! core-js/fn/string/trim-start */ \"./node_modules/core-js/fn/string/trim-start.js\");\n\n__webpack_require__(/*! core-js/fn/string/trim-end */ \"./node_modules/core-js/fn/string/trim-end.js\");\n\n__webpack_require__(/*! core-js/fn/symbol/async-iterator */ \"./node_modules/core-js/fn/symbol/async-iterator.js\");\n\n__webpack_require__(/*! core-js/fn/object/get-own-property-descriptors */ \"./node_modules/core-js/fn/object/get-own-property-descriptors.js\");\n\n__webpack_require__(/*! core-js/fn/object/values */ \"./node_modules/core-js/fn/object/values.js\");\n\n__webpack_require__(/*! core-js/fn/object/entries */ \"./node_modules/core-js/fn/object/entries.js\");\n\n__webpack_require__(/*! core-js/fn/promise/finally */ \"./node_modules/core-js/fn/promise/finally.js\");\n\n__webpack_require__(/*! core-js/web */ \"./node_modules/core-js/web/index.js\");\n\n__webpack_require__(/*! regenerator-runtime/runtime */ \"./node_modules/regenerator-runtime/runtime.js\");\n\n//# sourceURL=webpack:///./node_modules/@babel/polyfill/lib/noConflict.js?");

6. 基於這個問題，咱們能夠引入babel-runtime, 來避免重複導入

按需轉化。

{

    "presets": [

        "@babel/preset-env",

        {"useBuiltIns": "usage"}

    ],

    "plugins": [

        "@babel/plugin-transform-runtime",

        {

            "corejs": false,

            "helpers":true,

            "useESModules": true,

            "regenerator": true

        }

    ]

}變成了這樣

eval(" // 19.1.3.6 Object.prototype.toString()\n\nvar classof = __webpack_require__(/*! ./_classof */ \"./node_modules/core-js/modules/_classof.js\");\n\nvar test = {};\ntest[__webpack_require__(/*! ./_wks */ \"./node_modules/core-js/modules/_wks.js\")('toStringTag')] = 'z';\n\nif (test + '' != '[object z]') {\n  __webpack_require__(/*! ./_redefine */ \"./node_modules/core-js/modules/_redefine.js\")(Object.prototype, 'toString', function toString() {\n    return '[object ' + classof(this) + ']';\n  }, true);\n}\n\n//# sourceURL=webpack:///./node_modules/core-js/modules/es6.object.to-string.js?");

 

8.打包前清空

new CleanWebpacklugins()

eval("var global = __webpack_require__(/*! ./_global */ \"./node_modules/core-js/modules/_global.js\");\n\nvar macrotask = __webpack_require__(/*! ./_task */ \"./node_modules/core-js/modules/_task.js\").set;\n\nvar Observer = global.MutationObserver || global.WebKitMutationObserver;\nvar process = global.process;\nvar Promise = global.Promise;\nvar isNode = __webpack_require__(/*! ./_cof */ \"./node_modules/core-js/modules/_cof.js\")(process) == 'process';\n\nmodule.exports = function () {\n  var head, last, notify;\n\n  var flush = function () {\n    var parent, fn;\n    if (isNode && (parent = process.domain)) parent.exit();\n\n    while (head) {\n      fn = head.fn;\n      head = head.next;\n\n      try {\n        fn();\n      } catch (e) {\n        if (head) notify();else last = undefined;\n        throw e;\n      }\n    }\n\n    last = undefined;\n    if (parent) parent.enter();\n  }; // Node.js\n\n\n  if (isNode) {\n    notify = function () {\n      process.nextTick(flush);\n    }; // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339\n\n  } else if (Observer && !(global.navigator && global.navigator.standalone)) {\n    var toggle = true;\n    var node = document.createTextNode('');\n    new Observer(flush).observe(node, {\n      characterData: true\n    }); // eslint-disable-line no-new\n\n    notify = function () {\n      node.data = toggle = !toggle;\n    }; // environments with maybe non-completely correct, but existent Promise\n\n  } else if (Promise && Promise.resolve) {\n    // Promise.resolve without an argument throws an error in LG WebOS 2\n    var promise = Promise.resolve(undefined);\n\n    notify = function () {\n      promise.then(flush);\n    }; // for other environments - macrotask based on:\n    // - setImmediate\n    // - MessageChannel\n    // - window.postMessag\n    // - onreadystatechange\n    // - setTimeout\n\n  } else {\n    notify = function () {\n      // strange IE + webpack dev server bug - use .call(global)\n      macrotask.call(global, flush);\n    };\n  }\n\n  return function (fn) {\n    var task = {\n      fn: fn,\n      next: undefined\n    };\n    if (last) last.next = task;\n\n    if (!head) {\n      head = task;\n      notify();\n    }\n\n    last = task;\n  };\n};\n\n//# sourceURL=webpack:///./node_modules/core-js/modules/_microtask.js?");

posted on 2021-05-24 07:42 connie313  閱讀(0)  評論(0) 編輯 收藏