从零开始搭建一个前端框架（二）简单配置优化打包过程

Run_youngman

已于 2022-02-09 15:15:28 修改

阅读量510

点赞数 1

文章标签： webpack javascript 前端

于 2022-02-09 15:10:27 首次发布

本文链接：https://blog.csdn.net/Run_youngman/article/details/122842536

版权

新建打包配置文件

上一篇文章：《从零开始搭建一个前端框架（一）:环境准备并完成简单打包》，中完成了一个简单的打包，但是我们发现html还需要自行复制，然后修改引用文件的名称，这样感觉有点脱裤子放屁，所以本期我们尝试使用代码配置自动完成。

源代码参考

新建webpack.config.js，此时文档目录结构为

-- src
  -- index.js
-- index.html
--package.json  //npm init时自动生成
--webpack.config.js // 手动创建

mode

首先来说一下webpack的mode属性，他有三个值，分别为

development
production
none

使用不同的值，webpack会根据情况进行不同程度的打包，下面实践一下：

webpack.config.js

module.exports = {
    mode: 'production' // 'development'
}

修改为两种mode然后执行 npm run build,篇幅原因不给大家截图实际效果了，对比下来，可以发现production下，生成的main.js是被压缩过的，体积更小，这也更符合生产环境的特点：我们不需要在生产环境进行打断点调试，而且我们往往希望生产环境可以加载的更快。

所以，我们日常开发时，需要使用development开发模式，打包项目并发布到线上时，需要使用production模式。

copy-webpack-plugin

一些内容我们不希望webapck帮助我们打包，而是希望原原本本的复制到打包文件中，这个时候我们就需要用到这个插件,如上文所说，我们希望打包时可以自动把index.html复制到dist文件夹中，而不是手动进行复制(这里只是举了个使用的例子，实际生成dist文件夹下的index.html文件可以使用html-webpack-plugin)。

安装：

npm install --save-dev copy-webpack-plugin

然后webpack.config.js改为：

const CopyWebpackPlugin=require('copy-webpack-plugin');

module.exports = {
    mode: "production",
    plugins: [
        new CopyWebpackPlugin({ // 具体用法需要参照官网https://www.npmjs.com/，不同版本使用方式不一致。
            patterns: [
                {
                    from: __dirname + '/index.html',  // 复制此文件
                    to: __dirname + '/dist'  // 将文件复制到
                }
            ]
        })
    ]
}

然后运行 npm run build，可以发现生成的dist文件夹中多了一个index.html文件，已经实现了我们的最初的目标。

可不可以给打包生成的文件改个名字呢，答案是肯定的。

entry & output

顾名思义，这是webpack打包文件的输入和输出，通过之前打包的结果，他是有默认行为的，也就是：

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

现在我们将他们改为：

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',  // 键值对，键 index即为output中的[name]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js', //这个name指代的就是 index.js 中的 index
    },
};