使用webpack初始化项目

前端在脚手架没有出现之前，工程师都是自己手动配置的，因为我是直接上手的脚手架，所有当时认为手动创建很麻烦没必要学习，如今改变了这个想法，自己搭建一个项目还是可以学习到很多东西的。下边以webpack为例，手动来搭建一个项目。😄😏😟

1. 生成package.json文件

1. 首先打开编辑器（webstorm、vscode、submit）不限，这里我使用vscode作为演示；

2. 通过Ctrl + ~打开命令行工具；

3. 执行命令npm init -y生成package.json文件

2. 安装插件

1. 后面会进行讲解（安装格式为：npm install -D xxx）。

2. 配置一下package.jsonscripts

3. 创建项目目录

1. 创建一个项目的目录。

2. 简单说明一下每个文件的作用。

src： 这里我定义为项目的主文件；

• assets： 这里存放的是项目的静态文件，如：图片、音视频；
• modules：因为使用的是TypeScript是面向对象的思想，我把项目用到的类放在这个下边；
• style：项目使用了less预处理器，存放的是项目的样式(xxx.less)；

node_modules： 这个是在install插件的时候自动生成的，主要是每个插件的实现代码；
index.html：项目的模板；
index.ts：项目的入口文件。
package.json： 存放了项目所需插件的版本，
注意：如果不小心把node_modules文件夹删除了，不用担心，可以执行npm install命令重新生成node_modules。

tsconfig.json： 这个文件主要是关系TypeScript的配置文件，这里我只是简单的配置了一下。

4. webpack文件配置说明

• 主要分几个模块：

  entry：指定项目入口文件（就是前面提到的'./src/index.ts'），在modules文件夹中定义的Class通过import关键字引入进来进行操作。

  

  output：指定打包文件所在目录。通过path属性指定项目的打包文件的目录，通过filename指定文件名。这里我是用了environment属性，目的是为了兼容下IE部分版本。

  

module： 指定webpack打包时要使用模块。通过配置rules[Array]。需要注意的是在每项use属性中加载器是自上而上执行的，具体看附录！

plugins： 配置Webpack插件。

resolve： 用来设置引用模块。

总结

到此为止，项目的初始化算是初步完成，当然如果需要处理一下图片则需要引入对应的插件，其实原理和引入less大同小异，就不再进行赘述。通过配置webpack让开发者对项目整体搭建有一个更深刻的理解。我总是觉得写代码，思想很重要，不知道大家是否认可我的观点。👑👑👑

附录webpack.config.js代码

// 引入一个包，定义路径
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 告诉webpack不使用箭头
        environment:{
            arrowFunction: false,
            const: false
        }
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                     // 配置babel
                     {
                         // 指定加载器
                         loader:"babel-loader",
                         // 设置babel
                         options: {
                             // 设置预定义的环境
                             presets:[
                                 [
                                     // 指定环境的插件
                                     "@babel/preset-env",
                                     // 配置信息
                                     {
                                         // 要兼容的目标浏览器
                                         targets:{
                                             "chrome":"58",
                                             "ie":"11"
                                         },
                                         // 指定corejs的版本
                                         "corejs":"3",
                                         // 使用corejs的方式 "usage" 表示按需加载
                                         "useBuiltIns":"usage"
                                     }
                                 ]
                             ]
                         }
                     },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            },
            // 设置less文件的处理
            {
              test: /\.less$/,
              use: [
                'style-loader',
                'css-loader',
                {
                  loader: "postcss-loader",
                  options: {
                    postcssOptions: {
                      plugins: [
                        [
                          "postcss-preset-env",
                          {
                            browsers: "last 2 versions"
                          }
                        ]
                      ]
                    }
                  }
                },
                'less-loader'
              ]
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: "./src/index.html"
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
};