webpack项目搭建

2021-10-14 04:08:17

官方文档

1、初始化package.json文件

   npm init -y

2、创建基本目录结构

3、配置webpack

 npm i -D webpack

4、创建并配置 webpack.config.js 文件

var path = require(‘path‘)
module.exports = {
	entry: ‘./src/main.js‘,
	output: {
		path: path.join(__dirname, ‘./dist/‘), //这里必须是绝对路径
		filename: ‘bundle.js‘
	}
}

5、配置 npm scripts

5.1 找到package.json 文件

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2"
  }
}

6、打包

npm run build

6.1、得到dist文件

7、在index.html中引入dist/bundle.js文件

7.1、运行index.html文件

8、自动编译

8.1、运行时运行 npm run watch-build

webpack项目搭建