WebPack打包工具

WebPack打包工具

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

• 全局安装

  npm install -g webpack webpack-cli

• 创建配置文件webpack.config.js

  import path from 'path' //Node.js内置模块
  const __dirname = path.resolve()
  
  // 打包的是js
  export default {
      entry: './src/main.js', //配置入口文件
      output: {
          path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
          filename: 'bundle.js'//输出文件
      }   
  }

• 创建dist文件夹，用于放置打包后的文件

• 执行打包命令

  webpack --mode=development