webpack入门——如何配置打包

• 1.创建一个包，初始一个项目（出来一个直接回车就可以了,最后一步询问是否要写进package.json包里，输入yes即可创建出一个package.json）
  npm init

• 2.安装

  • 2.1
    • 2.1.1全局安装(有事安装不了可尝试手机wifi)，一般不建议
      npm install webpack web-cli -g
    • 2.1.2安装成功后查看版本
      webpack -v
    • 2.1.3卸载
      npm uninstall webpack web-cli -g

• 2.2
  • 2.2.1项目中安装
    npm install webpack webpack-cli -D
  • 2.2.2安装成功后查看版本
    npx webpack -v
  • 2.2.3卸载
    npm uninstall webpack web-cli -D
  • 2.2.4查看历史版本号
    npm info webpack
  • 2.2.4安装到指定版本
    npm install [email protected] webpack-cli -D
  • 2.2.5安装依赖
    npm install

• 3.配置文件
  自己新建一个文件-> webpack.config.js
  webpack.config.js

// 引入核心模块
const path = require('path')
const webpack = require('webpack')

module.exports = {
    
    
  mode: 'production', //打包后是压缩的代码
  // mode: 'development',  //打包后是不压缩的代码
  // entry: './src/index.js',  //写法1，打包哪个文件，打包文件入口
  entry: {
    
    
    main:'./src/index.js',  //写法2，打包哪个文件，打包文件入口
  },
  output:{
    
      //把打包好的文件
    filename:'bundle.js',  //打包好的文件叫什么名字
    path: path.resolve(__dirname,'dist') //打包好的文件放在哪个文件夹下，要跟一个绝对路径，__dirname代表的是webpack.config.js所在的当前目录的路径
  }
}

• 打包
  • 3.1 打包的是默认配置文件webpack.config.js文件
    npx webpack 或
  • 3.2 打包的是自己定义的文件，eg：webpackconfig.js
    npx webpack --config webpackconfig.js 或
    npx webpack xxx.js(切换到src目录下)
  • 3.3 配置文件package.json文件下的scripts，“bundle”:“webpack”，意思为npm run bundle为运行webpack
    npm run bundle
    package.json

{
    
    
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // 是否要被外部引用，是就这样写，不是可以删除或注释
  "scripts": {
    
    
    // "test": "echo \"Error: no test specified\" && exit 1"
    "bundle":"webpack"  //不需要运行npx webpack当运行npm run bundle时可以打包
  },
  "author": "waiting",
  "license": "ISC",
  "devDependencies": {
    
    
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

• 3.4 为什么要安装webpack-cli？
  安装后就可以在代码的命令行中正确的运行webpack，如果不安装这个包，就没有办法在命令行中运行webpack或者npx webpack这样的指令