更便捷的使用webpack（2/2）

超链接：更便捷的使用webpack（1/2）

怎么进行多文件的输入？

在webpack.config.js文件中，entry中用{}引入多个文件

module.exports = {
    entry: {
        app: path.resolve(__dirname, './src/index.js'),
        print: path.resolve(__dirname, './src/print.js')
    }
}    

生成的文件打开后有错误，找不到错误位置？

按这行代码会产生app.bundle.js和print.bundle.js两个文件

output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './build')
    }

打开文件调试的时候发现控制台的错误

但是在到源文件中寻找错误时候，发现代码根本读不懂

解决：
在webpack.config.js文件中，引入

devtool: 'inline-source-map'

再进行编译之后，打开文件控制台显示

此时就可以在print.js中找到错误位置

怎么能自动删除无用的编译文件？

终端安装clean-webpack-plugin

npm i clean-webpack-plugin --save-dev

在webpack.config.js文件中引入

const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin

在module.exports中写入即可

plugins: [
        new CleanWebpackPlugin()
        ]

引用clean-webpack-plugin后，html文件也被删除？

1.终端安装html-webpack-plugin

npm i html-webpack-plugin --save-dev

2.在webpack.config.js文件中引入

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

3.新建一个文件夹（此处为public），写好一个html模版文件

4.在module.exports中写入即可

plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')
        })
    ]

怎么完成自动编译并自动打开文件+自动刷新？

终端安装 webpack-dev-server

npm i webpack-dev-server --save-dev

终端运行 webpack-dev-server

npx webpack-dev-server --open

怎么修改打开的端口？

默认打开端口8080，想要修改 在后边加上 –port 3000（自行定义端口）

npx webpack-dev-server --open --port 3000