创建基本的webpack4.x项目

创建基本的webpack4.x项目

1.运行 npm init -y 快速初始化项目

2.在项目的根目录创建src源代码目录和dist产品目录

3.在src目录下新建 index.html 和 main.js 入口文件

4.使用 cnpm 安装 webpack ，运行 cnpm i webpack -D

​ 安装 cnpm npm i cnpm -g

5.再安装 cnpm i webpack-cli -D

6.注意：webpack 4.x 提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积

• 默认约定了
• 打包的入口是src -> index
• 打包输出文件是dist -> main.js

因此将src->mian.js 可以修改为 index.js

在index.html 中引入 dist->main.js 在浏览器中可以看到 ok

webpack 4.x 中mode 选项（必须的） development 不会压缩代码 production 会压缩代码

安装 html-webpack-plugin

package.json

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --progress --compress --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^5.20.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js配置文件

// 向外暴露一个打包的配置对象；因为webpack 是基于node构建的，所以webpack支持所有的node api和语法
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
  template: path.join(__dirname, './src/index.html'), // 源文件
  filename: 'index.html' // 生成内存中的首页的名称
})
module.exports = {
  mode: 'development', // development production
  // 在webpack 4.x中，有一个很大的特性，就是约定大于配置， 默认的打包入口是 src-> index.js
  // 可以修改入口文件  entry:'./main.js'
  plugins: {
    htmlPlugin
  }
}

启动 npm run dev