webpack初级使用案例-超详细

目录

1.创建初始目录文件

2.确保环境中安装了webpack和webpack-cli

3.在根目录下创建package.json文件

package.json文件代码

4.为本项目安装webpack作为依赖

5.在根路径下新建并配置webpack.config.js文件

6.开始打包js文件

7.检查一下生成的js文件

8.验证一下生成的js可用性

在index.html文件中引入main.js文件

index.js配置

9.查看index.html页面

---

1.创建初始目录文件

图中的3个目录创建出来，然后在src下面建立index.html和index.js文件

两个文件可以先空着，没关系接着走下一步

2.确保环境中安装了webpack和webpack-cli

如果没有安装，需要执行下面两个命令

$ cnpm install webpack -g

$ npm install webpack-cli -g

3.在根目录下创建package.json文件

package.json文件代码

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "weboack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.33.2"
  }
}

4.为本项目安装webpack作为依赖

$ npm install --save-dev webpack

5.在根路径下新建并配置webpack.config.js文件

具体文件代码：

注意：4.0以上的版本只需要写入mode配置即可

查看版本命令：webpack -v

module.exports={
    // entry:__dirname+"/app/main.js",//唯一入口文件
    //output:{
     //   path:__dirname+"/public",//打包后文件存放位置
        // filename:"bundle.js"//打包后输出文件的文件名
    // },
    //以上的代码，在webpack4.0以上就可以不用配置了，4.0后的版本只需要配置mode即可
    mode:"development"//设置mode
}

6.开始打包js文件

直接命令行输入：webpack即可

7.检查一下生成的js文件

在dist文件夹中会生成一个main.js文件

8.验证一下生成的js可用性

在index.html文件中引入main.js文件

根据index.js配置，会在浏览器的控制台打印输出“okkkkkk”的字样

index.js配置

9.查看index.html页面