1、项目初始化
npm init -y
初始化结束之后记得修改name属性,否则在npm install webpack
的时候会有下面的报错:npm ERR! code ENOSELF npm ERR! Refusing to install package with name "webpack" under a package
可参考Refusing to install package with name “webpack” under a package
2、安装webpack、webpack-cli
npm install webpack webpack-cli -D
3、新建src/index.js
文件,在文件中输入以下代码:
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
const fmy = new Person('fmy');
console.log(111);
4、使用 npx webpack --mode=development
进行构建
出现了dist目录,出现一个打包出来的main.js文件。因为webpack有默认的配置,如默认的入口文件是./src
,默认打包到dist/main.js
。可以看到,src/index.js
并没有被转义为低版本的代码。
因此需要安装loader
用于对源代码进行转换。
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("class Person {\r\n constructor(name) {\r\n this.name = name;\r\n }\r\n getName() {\r\n return this.name;\r\n }\r\n}\r\n\r\nconst fmy = new Person('fmy');\r\nconsole.log(111);\r\n\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });
5、安装babel-loader
npm install babel-loader -D
还需要配置babel-loader
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3
6、新建webpack.config.js
文件
(我们可以在 .babelrc
中编写 babel
的配置,也可以在 webpack.config.js
中编写 babel
的配置)
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/ //排除 node_modules 目录
}
]
}
}
7-1、 创建.babelrc
配置 babel
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
8-1、此时再次npx webpack --mode=development
,发现index.js代码已被编译成低版本的JS代码。
扫描二维码关注公众号,回复:
13427774 查看本文章
/***/ "./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 _babel_runtime_corejs3_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs3/helpers/classCallCheck */ \"./node_modules/@babel/runtime-corejs3/helpers/classCallCheck.js\");\n/* harmony import */ var _babel_runtime_corejs3_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _babel_runtime_corejs3_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime-corejs3/helpers/createClass */ \"./node_modules/@babel/runtime-corejs3/helpers/createClass.js\");\n/* harmony import */ var _babel_runtime_corejs3_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs3_helpers_createClass__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nvar Person = /*#__PURE__*/function () {\n function Person(name) {\n _babel_runtime_corejs3_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, Person);\n\n this.name = name;\n }\n\n _babel_runtime_corejs3_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(Person, [{\n key: \"getName\",\n value: function getName() {\n return this.name;\n }\n }]);\n\n return Person;\n}();\n\nvar fmy = new Person('fmy');\nconsole.log(111);\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });
7-2、在 webpack.config.js
中编写 babel
的配置
module.exports = {
// mode: 'development',
module: {
//rules是个数组
rules: [
//loader需要配置在module.rules中
{
//test是匹配规则,针对符合规则的文件进行处理
test: /\.jsx?$/,
//use可以是个字符串或者是个数组,数组的每一项可以是字符串或者对象
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
},
exclude: /node_modules/ //排除 node_modules 目录
}
]
}
}
详情可查看我搭建的webpackTest