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?");