在最外部执行

  1. //全局安装webpack-cli
  2. npm i webpack webpack-cli -g
  3. //当前安装webpack-cli
  4. npm i webpack webpack-cli -D
  5. //当前安装css-loader和style-loader
  6. npm i css-loader style-loader -D

配置文件webpack.config.js

  1. /*
  2. webpack.config.js webpack的配置文件
  3. 作用：指示webpack 干那些活（当你运行webpack指令时 ，会加载里面的配置）
  5. 所有构建工具都是 基于node.js平台运行的 模块化采用common.js
  9. */
  10. //resolve用来拼接绝对路径的方法
  11. const {resolve} = require('path')
  13. module.exports = {
  14.     //webpack配置
  15.     //入口起点
  16.     entry:'./src/index.js',
  17.     //输出
  18.     output:{
  19.         //输出文件名
  20.         filename:'built.js',
  21.         // 输出路径
  22.         //__dirname nodejs的变量，代表当前文件的目录绝对路径
  23.         path:resolve(__dirname,'build')
  24.     },
  25.     module:{
  26.         rules:[
  27.             //详细loader配置
  28.         ]
  29.     },
  30.     //plugins的配置
  31.     plugins:[
  32.          //详细plugins配置
  33.     ],
  34.     mode:'development', //开发模式
  35.     // mode:'production',
  36. }