webpack4.x基础配置入门——初始环境搭建（一）

环境搭建起步

初始化package.json

npm init

安装依赖

webpack4.x版本需要同时安装webpack和webpack-cli两个模块
命令: npm i webpack webpack-cli -D

新建文件目录

src文件下创建index.js 和 webpack.config.js

src/index.js
console.log("hello world")

webpack.config.js 文件

const path = require("path") //node内置模块
module.exports = {
entry:"./src/index.js", //打包入口文件
output:{
  filename:"bundle.js", //生成的文件名
  path:path.resolve(__dirname,'dist') //生成的文件夹
}
}

执行打包命令

1. npm默认是有npx可以不用在package.json中的scripts中进行配置。
   命令：npx webpack
2. 可以在package.json的scripts中配置
   "scripts": { "bundle": "webpack"}
   命令: npm run bundle

上述两种方式都可以对入口文件src/index.js进行打包，在项目中生成dist目录，里面会有main.js,打包成功。