webpack集成yarn-初步

• 创建项目文件夹
  yarn init

• 创建基本目录结构
  public/index.html
  src/main.js
  webpack.config,js

• 安装必要依赖
  webpack
  webpack-cli
  webpack-dev-server
  clean-webpack-plugin
  html-webpack-plugin

• 添加配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
     
    entry: './src/main.js',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
     
            title: "Webpack App",
            template: "public/index.html"
        })
    ],
    devServer: {
     
        contentBase: './dist',
    },
    output: {
     
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    }
}

• package.json 添加启动项命令

  "scripts": {
     
    "start": "webpack-dev-server --open",
    "build": "webpack"
  }

• 运行 yarn start