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?");
原文：https://www.cnblogs.com/connie313/p/14802863.html