快速搭建webpack开发环境

2022-02-14 233 阅读1分钟

搭建Webpack环境

搭建项目用于vue源码学习，过程记录下来，方便日后用

初始化项目

创建文件夹
初始化package.json
```
npm init -y
```

安装相应依赖

cnpm install webpack --D
cnpm install webpack-cli -D
cnpm install webpack-dev-server -D
cnpm install html-webpack-plugin -D

/// 或者
cnpm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

// pack.json文件
{
  "name": "mini-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

创建相应的文件

/www/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/bundle.js"></script>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: "development",
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "www/index.html"
    })
  ],
  devServer: {
    port: 8080
  }
}

运行

npm run serve