一、Webpack基本配置及使用

一、Webpack基本配置及使用

1、安装本地Webpack

webapck webpack-cli -D
// -D 表示上线不需要打这个包

// 初始化一下，记录安装的依赖
yarn init -y

// 5.2支持的npx语法可以直接执行webpack
// 默认去找node_modules下面的bin文件里面的webpack.cmd
npx webpack

2、 Webpack可以0配置

打包工具 -> 输出后的结果(js模块)

打包 -> 支持js模块化

// 执行这行命令，即可打包出一个main.js文件
npx webpack

提示需要配置mode

3、手动配置Webpack

1. 简单示例

默认配置文件的名字：webpack.config.js

// webpack 是 node 写出来的 所以要用node的写法来运行
const path = require('path');
// 这是一个导出的配置文件
module.exports = {
   
  mode: 'development', // 模式(两种)：production development
  entry: './src/index.js', // 入口
  output: {
    // 出口
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 路径(必须是一个绝对路径)，__dirname不加也可以
  }
}

// 结果：会在根目录下有一个 dist/bundle.js 文件
// 可以在浏览器环境中运行即可

简易示例文件

// src/index.js
let str = require('./a.js');
console.log(str);

// src/a.js
module.exports = 'hello';

打包后的结果

// dist/bundle.js
(() => {
   
  var __webpack_modules__ = {
   
    "./src/a.js": // key -> 模块的路径
    (module) => {
    // value -> 函数
      eval(
        "module.exports = 'hello'\n\n//# sourceURL=webpack://practise/./src/a.js?"
      );
    },

    "./src/index.js":
    (
      __unused_webpack_module,
      __unused_webpack_exports,
      __webpack_require__
    ) => {
   
      eval(
        'let str = __webpack_require__("./src/a.js")\r\n\r\nconsole.log(str)\n\n//# sourceURL=webpack://practise/./src/index.js?'
      );
    },
  };
  // 定义了一个缓存[如果模块加载完了，不需要再次加载，从缓存中取出即可]
  var __webpack_module_cache__ = {
   };
  // 配置实现require方法(因为require无法在浏览器中运行)
  function __webpack_require__(moduleId) {
   
    var cachedModule = __webpack_module_cache__[moduleId];
    // 检查模块在不在缓存中，如果在缓存中，直接返回模块
    if (cachedModule !== undefined) {
   
      return cachedModule.exports;
    }
    // 安装一个模块[key: Object]
    var module = (__webpack_module_cache__[moduleId] = {
   
      exports: {
   },
    });
    // 通过key找到对应函数并执行
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // 返回对应的module.exports即可
    return module.exports;
  }
  var __webpack_exports__ = __webpack_require__("./src/index.js"); // './src/index.js': 入口模块
})();

2. 修改配置文件名

如果想要将配置文件名修改，如：webpack.config.my.js ，此时打包抛出异常

但是我们希望可以找到我们的配置文件。可以这样做：

npx webpack --config webpack.config.my.js

但是为了更方便，我们可以在 package.json 中进行配置：

{
   
    //...
    "scripts": {
   
        "build": "webpack --config webpack.config.my.js"
     }
    //...
}

执行 npm run build 或yarn build 即可，其他类似。

但是下面这样写是需要注意的：

"scripts": {
   
    "build": "webpack"
}

// 它并不是一个参数，不会识别config后面的内容
npm run build --config webpack.config.my.js
yarn build --config webpack.config.my.js // yarn命令是可以的

// 如果一定要这样写，可以使用下面这种方式
npm run build -- --config webpack.config.my.js

3. 本地开发服务(通过ip访问)[webpack-dev-server]

webpack-dev-server

// 可通过 npx webpack-dev-server 开启，也可配置脚本

// package.json
"scripts": {
   
    "dev": "webpack-dev-server"
}

// webpack.config.js
module.exports = {
   
    //