Webpack 2 项目设置教程

Webpack 2 项目设置教程

how-to-setup-webpack-2🔧 ⚙ Tutorial to setup webpack 2 from scratch.项目地址:https://gitcode.com/gh_mirrors/ho/how-to-setup-webpack-2

1. 项目的目录结构及介绍

webpack-2-demo/
├── dist/
│   └── index.html
├── src/
│   └── index.js
├── package.json
├── package-lock.json
└── webpack.config.js

• dist/: 打包后的文件存放目录。
• src/: 源代码目录，包含项目的入口文件 index.js。
• package.json: 项目依赖和脚本配置文件。
• package-lock.json: 锁定依赖版本的文件。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js。这是 Webpack 打包的入口文件，通常包含应用程序的初始化代码。

// src/index.js
console.log('Hello, Webpack 2!');

3. 项目的配置文件介绍

Webpack 的配置文件是 webpack.config.js，它定义了 Webpack 如何打包项目。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

• entry: 指定打包的入口文件。
• output: 指定打包后的文件名和输出路径。

通过以上配置，Webpack 会将 src/index.js 打包成 dist/main.js。

总结

本教程介绍了如何设置和配置 Webpack 2 项目，包括项目的目录结构、启动文件和配置文件。通过这些步骤，你可以快速开始使用 Webpack 2 进行项目开发。

how-to-setup-webpack-2🔧 ⚙ Tutorial to setup webpack 2 from scratch.项目地址:https://gitcode.com/gh_mirrors/ho/how-to-setup-webpack-2