webpack工程化（三）

注：执行yarn dev启动服务，webpack dev能够把文件build到内存里，不需要打包后的dist文件，浏览器也可以正常运行，dist文件夹用于将来部署到线上使用

服务启动后，我们index.html中写了一个home字符串，按道理浏览器访问的页面会显示这个字符串，但是目前没有显示，只执行了app.js中的代码

1、为了解决这个问题，需要在HtmlWebpackPlugin插件中配置模板

在这里插入代码片

new HtmlWebpackPlugin(
      {
        template:path.join(__dirname,'./public/index.html'),
        filename:'index.html'
      }
    ),

执行yarn build打包命令，可以看到home已经被打包进去了

yarn dev启动服务，可以看到浏览器中已经显示home字符串了，也就是说http://localhost:8082/访问的就是打包dist文件夹中的index.html文件

2、（改进）将app.js打包到dist文件夹下的js文件夹中，也就是打包后的dist文件夹新建一个js文件夹

// 配置入口
  entry:{
    'js/app':'./src/app.js'
  },

  // 配置出口
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'[name].js'
  },

3、为了解决每次打包生成的dist文件夹删除旧的文件，自动更新新的文件，需要安装插件

 yarn add clean-webpack-plugin -D

在webpack.config.json中引入插件

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 引入插件
 plugins:[
 	new CleanWebpackPlugin()
 ]

至此，webpack基础工程搭建结束

webpack.config.json

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports={
  // 配置环境（开发环境）
  mode:'development', 
  
  devtool:'source-map',

  // 配置入口
  entry:{
    'js/app':'./src/app.js'
  },

  // 配置出口
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'[name]-[hash:6].js'
  },

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin(
      {
        template:path.join(__dirname,'./public/index.html'),
        filename:'index.html',
        inject:true
      }
    ),
    new CopyPlugin({
      patterns: [
        { 
          from: path.join(__dirname,'./public/favicon.ico')
        },     
      ]
    }),
    new CleanWebpackPlugin()
  ],

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

package.json——安装的包

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "6.3.2",
    "html-webpack-plugin": "4.5.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "3.11.0"
  },
  "scripts": {
    "build": "npx webpack",
    "dev": "npx webpack-dev-server"
  }
}