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__);
/* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.css */ "./src/index.css");
console.log('hello world');
var input = document.createElement('input');
document.body.appendChild(input);
var test = function test(n) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(2);
}, 1000);
}).then(console.log);
};
//# sourceURL=webpack:///./src/index.js?");
可是arrowFunction转化了 可是proimise没有。 promise、map是api, 需要借助babelpolyfill
确实转化了， 但是打出来的包很大。
eval("
__webpack_require__(/*! core-js/es6 */ "./node_modules/core-js/es6/index.js");
__webpack_require__(/*! core-js/fn/array/includes */ "./node_modules/core-js/fn/array/includes.js");
__webpack_require__(/*! core-js/fn/array/flat-map */ "./node_modules/core-js/fn/array/flat-map.js");
__webpack_require__(/*! core-js/fn/string/pad-start */ "./node_modules/core-js/fn/string/pad-start.js");
__webpack_require__(/*! core-js/fn/string/pad-end */ "./node_modules/core-js/fn/string/pad-end.js");
__webpack_require__(/*! core-js/fn/string/trim-start */ "./node_modules/core-js/fn/string/trim-start.js");
__webpack_require__(/*! core-js/fn/string/trim-end */ "./node_modules/core-js/fn/string/trim-end.js");
__webpack_require__(/*! core-js/fn/symbol/async-iterator */ "./node_modules/core-js/fn/symbol/async-iterator.js");
__webpack_require__(/*! core-js/fn/object/get-own-property-descriptors */ "./node_modules/core-js/fn/object/get-own-property-descriptors.js");
__webpack_require__(/*! core-js/fn/object/values */ "./node_modules/core-js/fn/object/values.js");
__webpack_require__(/*! core-js/fn/object/entries */ "./node_modules/core-js/fn/object/entries.js");
__webpack_require__(/*! core-js/fn/promise/finally */ "./node_modules/core-js/fn/promise/finally.js");
__webpack_require__(/*! core-js/web */ "./node_modules/core-js/web/index.js");
__webpack_require__(/*! regenerator-runtime/runtime */ "./node_modules/regenerator-runtime/runtime.js");
//# 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()
var classof = __webpack_require__(/*! ./_classof */ "./node_modules/core-js/modules/_classof.js");
var test = {};
test[__webpack_require__(/*! ./_wks */ "./node_modules/core-js/modules/_wks.js")('toStringTag')] = 'z';
if (test + '' != '[object z]') {
__webpack_require__(/*! ./_redefine */ "./node_modules/core-js/modules/_redefine.js")(Object.prototype, 'toString', function toString() {
return '[object ' + classof(this) + ']';
}, true);
}
//# 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");
var macrotask = __webpack_require__(/*! ./_task */ "./node_modules/core-js/modules/_task.js").set;
var Observer = global.MutationObserver || global.WebKitMutationObserver;
var process = global.process;
var Promise = global.Promise;
var isNode = __webpack_require__(/*! ./_cof */ "./node_modules/core-js/modules/_cof.js")(process) == 'process';
module.exports = function () {
var head, last, notify;
var flush = function () {
var parent, fn;
if (isNode && (parent = process.domain)) parent.exit();
while (head) {
fn = head.fn;
head = head.next;
try {
fn();
} catch (e) {
if (head) notify();else last = undefined;
throw e;
}
}
last = undefined;
if (parent) parent.enter();
}; // Node.js
if (isNode) {
notify = function () {
process.nextTick(flush);
}; // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
} else if (Observer && !(global.navigator && global.navigator.standalone)) {
var toggle = true;
var node = document.createTextNode('');
new Observer(flush).observe(node, {
characterData: true
}); // eslint-disable-line no-new
notify = function () {
node.data = toggle = !toggle;
}; // environments with maybe non-completely correct, but existent Promise
} else if (Promise && Promise.resolve) {
// Promise.resolve without an argument throws an error in LG WebOS 2
var promise = Promise.resolve(undefined);
notify = function () {
promise.then(flush);
}; // for other environments - macrotask based on:
// - setImmediate
// - MessageChannel
// - window.postMessag
// - onreadystatechange
// - setTimeout
} else {
notify = function () {
// strange IE + webpack dev server bug - use .call(global)
macrotask.call(global, flush);
};
}
return function (fn) {
var task = {
fn: fn,
next: undefined
};
if (last) last.next = task;
if (!head) {
head = task;
notify();
}
last = task;
};
};
//# sourceURL=webpack:///./node_modules/core-js/modules/_microtask.js?");