webpack的使用

1.安装使用webpack

安装:npm i webpack webpack-cli -D

初始化:npm init --yes 得到package.json文件

2.webpack.config,js默认配置文件中的内容

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "production",
    entry: './src/js/main.js', // 入口文件
    output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    }
}

• mode:打包方式

  development:开发模式,加载速度快,占空间大,代码多

  production(默认值):生产模式,加载速度慢,占空间小,代码少

• entry:入口文件(默认入口是:./src/index.js)

• output:出口文件(绝对路径),即为打包后的路径(默认出口是:./src/dist/main.js)

  filename:打包的文件名(默认是main.js)

  path:打包的文件地址(决定出口文件在哪)

  3.简化打包命令

  (1)涉及多个打包配置指定时候,需要简化

  (2)代码如下

  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack",   
    "test": "echo "Error: no test specified" && exit 1"
  }
  

  • 写在package.json文件中,script下的dev,build
  • 运行命令 npm run dev npm run build