webpack4的简单配置

时间：2021-05-24 09:31:52 阅读：24 评论：0 收藏：0 [点我收藏+]

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

webpack4的简单配置

原文：https://www.cnblogs.com/connie313/p/14802863.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)