webpack Day01 实现JS文件打包1. 创建最简项目 2. 实现JS文件打包 Webpack核心概念（入口/输

前期准备初始化项目，生成package.json等文件

# 交互式生成（推荐）
npm init

# 一键生成默认配置（跳过提问）
npm init -y  # 或 --yes

创建文件目录等

--src
  --conponents
    --hello
      index.js
    index.js
    index.html
--config
  paths.js //文件路径常量以及文件路径获取函数
  webpack.cpmmon.js
  webpack.dev.js
  webpack.prod.js
package.json

安装相关依赖

1) 安装webpack 推荐本地安装
sudo npm i -D webpack
sudo npm i webpack-cli -D # 在package.json使用script提示需要webpack-cli
sudo npm install webpack-merge --save-dev

其中webpack进行配置， webpack-cli 在package.json中通过script配置webpack命令，webpack-merge 用于合并webpack配置

验收标准：打开index.html输出hello webpack。

解决步骤：

1、在js文件输出hello webpack，为此在conponents/hello下执行，在index.js引入。

export const sayHello = (content) => {
  console.log(content);
};

import { sayHello } from './components/hello';
sayHello("hello webpack");

2、打包相关js文件

2.1 配置webpack

const path = require('path');
const fs = require('fs');
/**
 * @description: 获取绝对路径
 * process.cwd() 返回 Node.js 进程的当前工作目录
 * fs.realpathSync() 同步方法，用于解析路径中的符号链接（如果有），并返回规范化的绝对路径。
 */
const appDirectory = fs.realpathSync(process.cwd());
module.exports = {
  appDirectory: appDirectory,//项目根目录
}

const { appDirectory } = require("./paths");
module.exports = {
  entry: {
    app: [`${appDirectory}/src/index.js`],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'], // 自动解析的扩展名
  },
  output: {
    path: `${appDirectory}/dist`,
    filename: "index.bundle.js",
  },

}

const {merge }= require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'development',
 
});

config/webpack.prod.js 暂时用不到可不配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'production'
});

2.2配置启动命令，并启动npm run dev

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config config/webpack.dev.js"
  },

3、在index.html引入 webpack打包后的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>webpack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
  </head>
  <body>
    <div id="app"></div>
    <h1>webpack 5 入门</h1>
    <script src="../dist/index.bundle.js"></script>
  </body>
</html>