Webpack Starter 项目教程

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

webpack-starter/
├── src/
│   ├── index.js
│   ├── styles.scss
│   └── template.html
├── webpack.config.js
├── package.json
├── package-lock.json
├── .babelrc
├── .browserslistrc
├── .eslintrc
├── .gitignore
├── .stylelintrc.json
├── .travis.yml
├── LICENSE
└── README.md

目录结构介绍

• src/: 项目的源代码目录，包含主要的 JavaScript 文件、样式文件和 HTML 模板。
  • index.js: 项目的入口 JavaScript 文件。
  • styles.scss: 项目的样式文件，使用 Sass 编写。
  • template.html: HTML 模板文件，用于生成最终的 HTML 文件。
• webpack.config.js: Webpack 的配置文件，定义了项目的构建规则和开发服务器配置。
• package.json: 项目的依赖管理文件，包含了项目的依赖包和脚本命令。
• package-lock.json: 锁定依赖包版本的文件，确保在不同环境中安装相同的依赖版本。
• .babelrc: Babel 的配置文件，用于将 ES6+ 代码转换为兼容性更好的 ES5 代码。
• .browserslistrc: 定义项目支持的浏览器范围，影响 Babel 和 Autoprefixer 的转换规则。
• .eslintrc: ESLint 的配置文件，用于代码风格检查和错误检测。
• .gitignore: Git 的忽略文件列表，定义了哪些文件或目录不需要被 Git 管理。
• .stylelintrc.json: Stylelint 的配置文件，用于样式文件的代码风格检查。
• .travis.yml: Travis CI 的配置文件，用于持续集成和自动化测试。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档，包含了项目的介绍、安装和使用说明。

2. 项目的启动文件介绍

启动文件

• src/index.js: 这是项目的入口 JavaScript 文件。Webpack 会从这个文件开始，构建整个项目的依赖树，并生成最终的打包文件。

启动命令

在 package.json 文件中，定义了以下启动命令：

{
  "scripts": {
    "start": "webpack serve --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  }
}

• npm start: 启动开发服务器，监听文件变化并自动刷新浏览器。
• npm run build: 构建生产环境的打包文件，生成优化后的静态资源。

3. 项目的配置文件介绍

Webpack 配置文件

• webpack.config.js: 这是 Webpack 的主要配置文件，定义了项目的构建规则和开发服务器的配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
};

其他配置文件

• .babelrc: Babel 的配置文件，定义了如何将 ES6+ 代码转换为 ES5 代码。

{
  "presets": ["@babel/preset-env"]
}

• .eslintrc: ESLint 的配置文件，定义了代码风格检查规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "warn"
  }
}

• .stylelintrc.json: Stylelint 的配置文件，定义了样式文件的代码风格检查规则。

{
  "extends": "stylelint-config-standard"
}

通过以上配置文件，项目可以实现代码的转换、优化、打包和开发服务器的启动。