关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

使用webpack打包前端工程7 使用ES6

源码可以用es6或es7, 用babel转化一下

在index.js 任意地方添加

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
iAmJavascriptES6()

安装babel

npm i @babel/core babel-loader @babel/preset-env --save-dev

webpack.config.js

rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]

.babelrc babel配置一定要写,不然不生效

{
    "presets": [
        "@babel/preset-env"
    ]
}

配置详情 https://babeljs.io/docs/en/config-files/

转换前

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"./node_modules/_lodash@4.17.11@lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _icon_png__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./icon.png */ \"./src/icon.png\");\n/* harmony import */ var _icon_png__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_icon_png__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_css__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\nfunction component() {\n    let element = document.createElement('div');\n\n\n    element.innerHTML = lodash__WEBPACK_IMPORTED_MODULE_0___default.a.join(['Hello', 'webpack'], ' ');\n    element.classList.add('hello');\n\n\n    var myIcon = new Image();\n    myIcon.src = _icon_png__WEBPACK_IMPORTED_MODULE_1___default.a;\n    element.appendChild(myIcon);\n    return element;\n}\n\ndocument.body.appendChild(component());\n\nconst arr = [1, 2, 3];\nconst iAmJavascriptES6 = () => console.log(...arr);\nwindow.iAmJavascriptES6 = iAmJavascriptES6;\n\niAmJavascriptES6()\n\n\n\n\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

转换后

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ \"./node_modules/_lodash@4.17.11@lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _icon_png__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./icon.png */ \"./src/icon.png\");\n/* harmony import */ var _icon_png__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_icon_png__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_css__WEBPACK_IMPORTED_MODULE_2__);\n\n\n\n\nfunction component() {\n  var element = document.createElement('div');\n  element.innerHTML = lodash__WEBPACK_IMPORTED_MODULE_0___default.a.join(['Hello', 'webpack'], ' ');\n  element.classList.add('hello');\n  var myIcon = new Image();\n  myIcon.src = _icon_png__WEBPACK_IMPORTED_MODULE_1___default.a;\n  element.appendChild(myIcon);\n  return element;\n}\n\ndocument.body.appendChild(component());\nvar arr = [1, 2, 3];\n\nvar iAmJavascriptES6 = function iAmJavascriptES6() {\n  var _console;\n\n  return (_console = console).log.apply(_console, arr);\n};\n\nwindow.iAmJavascriptES6 = iAmJavascriptES6;\niAmJavascriptES6();\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

其他 react里一般这么写

{
        test: /\.jsx?/, // 支持 js 和 jsx
        include: [
          path.resolve(__dirname, 'src'), // src 目录下的才需要经过 babel-loader 处理
        ],
        loader: 'babel-loader',
      },
转载请注明出处
分享到: 更多 (0)

评论 0