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?");
标签：__,core,webpack4,配置,modules,js,webpack,简单,fn 来源： https://www.cnblogs.com/connie313/p/14802863.html