webpack打包指定文件到指定位置

在不做设置的情况下，webpack会默认处理src文件夹下面的index.html文件，处理完成后会自动默认新建一个dist目录，并将生成的默认文件main.js存入里面，但当我们改变html文件名字后，webpack将无法进行运行打包，此时我们需要设置需要打包的具体文件。

具体操作如下：

1.导入node.js中专门操作路径的模块。

const path = require( 'path' )

2.指定要处理的文件。

entry: path.join( __dirname, '需要处理的文件的路径' )

3.指定生成的文件要存放到哪里。

output: {
        //存放的目录
        path: path.join( __dirname, '目录' ),
        //生成的文件名
        filename: '新生成的文件名'
    }

此时再在终端运行npm run dev（dev是自己取的名字）（详情可见webpack配置使用（自动打包））命令，就可以将我们需要处理的文件打包构建到我们指定的目录并生成我们指定的文件名称了。

完整代码：

//导入node.js中专门操作路径的模块
const path = require( 'path' )

//使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    //代表webpack运行的模式，可选值有两个development（开发模式）和production（发行模式,还可以对代码进行压缩）
    mode: 'development',
    //entry：'指定要处理的文件'
    entry: path.join( __dirname, './src/index.js' ),
    //指定生成的文件要存放到哪里
    output: {
        //存放的目录
        path: path.join( __dirname, 'dist' ),
        //生成的文件名
        filename: 'main.js'
    }
}