搭建一个简单的webpack（一）

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代码。

/***/ "./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

搭建一个简单的webpack（一）

猜你喜欢