webpack系列(1)--入门

入门

webpack的全局安装

• 执行如下命令
  npm i webpack webpack-cli -g
  不推荐webpack的全局安装，因为有可能运行的项目不是同一个webpack版本打包的

• 卸载webpack

  npm uninstall webpack webpack-cli -g

webpack项目内安装

• 首先在项目中执行命令：

  npm init

• package.json文件中添加"private":true,

• 删除"main:index.js"

• 安装webpack

  npm i webpack webpack-cli -D

这个时候，不能直接执行webpack -v，必须要使用npx webpack -v才能执行，npx帮助我们在当前目录下寻找webpack

安装其他版本的webpack

• 查看一个包的版本

  npm info webpack

• 安装其他版本
  npm i webpack@版本号 webpack-cli -D

这样，我们就能在不同的项目中使用不同版本的webpack

使用webpack

• 新建index.js,header.js,footer.js文件如下:

  • header.js

      export default class Header{
          constructor(){
              let div = document.createElement("div")
              div.innerText = "这是header"
              document.body.appendChild(div)
          }
      }

  • footer.js

      export default class Footer{
          constructor(){
              let div = document.createElement("div")
              div.innerText = "这是footer"
              document.body.appendChild(div)
          }
      }

  • index.js

      import Header from "./header"
      import Footer from "./footer"
      new Header()
      new Footer()

  执行命令 npx webpack index.js，这实际上使用了webpack的默认配置文件在打包

webpack配置文件

执行npx webpack报错，因为不知道webpack的入口文件在哪儿

编写webpack配置文件

• 创建webpack.config.js

  const path = require("path")
  module.exports = {
      entry:"./index.js",
      output:{
          filename:"bundle.js",
          path:path.resolve(__dirname,"bundle")
      }
  }

• 执行npx webpack即可

需要注意的是，webpack执行的是全局环境下的命令；npx webpack 执行的是当前项目下的webpack命令

指定webpack的配置文件

webpack的默认配置文件是webpack.config.js,如果不是这个文件名，需要指定配置文件，在package.json的scripts中：

npx webpack --config webpackconfig.js

优化项目目录

|-- webpack-demo(new)
    |-- .gitignore
    |-- README.md
    |-- index.html
    |-- package-lock.json
    |-- package.json
    |-- webpack.config.js
    |-- dist
    |   |-- bundle.js
    |-- src // 源码目录
        |-- footer.js
        |-- header.js
        |-- index.js

修改webpack.config.js文件

const path = require("path")
module.exports = {
    mode:"development"， // production
    entry:"./src/index.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist"),
    }
}

简化打包命令

• 在package.json文件的scripts中：

    "bundle":"npx webpack"

• 执行 npm run bundle 即可