webpack工程化（二）

1、新建index.html文件，使用webpack打包html

配置插件

yarn add html-webpack-plugin@4.5.0 -D

webpack.config.js中添加插件

在package.json中添加script脚本，这样打包命令就可以使用yarn build

执行打包命令

yarn build

可以看到index.html文件已经被打包，并且app.js文件也被引入进来了

2、创建server

安装devserver模块

yarn add webpack-dev-server@3.11.0 -D

在webpack.config.js中配置server

 // 配置server
  devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    port: 8082  // 端口号
  }

执行命令，就可以在本地启动server

npx webpack-dev-server

浏览器访问http://localhost:8082/
app.js中内容已经输出，报错是因为favicon.ico没有找到

可以在package.json中添加脚本，使用yarn dev命令就可以启动服务

3、解决favicon.ico找不到报错问题

首先随便找一个ico图标，这里使用的是webpack官网图标，保存到public路径下
webpack官网图标


需要使用webpack的文件复制插件，把图标打包到dist文件夹中

yarn add copy-webpack-plugin@6.3.2 -D

在webpack.config.js中配置CopyPlugin插件

const CopyPlugin = require("copy-webpack-plugin")

 // 配置插件
  plugins:[
    new HtmlWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        { 
          from: path.join(__dirname,'./public/*.ico')
        },     
      ]
    })
  ],

执行打包命令

yarn build