使用webpack热更新，自动编译less文件

新建工作区文件src

在src文件夹内，新建编译入口文件app.js，以及所需操作的文件文件夹。

初始化包管理文件

npm init -y

安装webpack、webpack-cli、webpack-dev-server

npm i webpack webpack-cli webpack-dev-server -D

• -S：–save，安装包信息将加入dependencies（生产阶段的依赖，当程序上线后依然需要此依赖）
• -D：–save-dev，安装包信息将加入devDependencies（开发阶段的依赖，程序上线后不再需要此依赖）

配置webpack

• 打开package.json文件，在scripts中新增配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 配置dev指令，执行webpack-dev-server --open表示自动打开浏览器
    "dev": "webpack-dev-server --open"
  },

• 新建webpack.config.js文件
  • 配置编译模式

  module.exports = {
      //编译模式，development表示开发者模式，编译不会压缩代码，编译时间较短，文件体积大
      //production模式表示上线模式，编译会压缩代码，编译时间较长，文件体积小。
      mode: "development"
  }
  

  • 配置打包入口路径及文件

  //引入node自带的path模块
  const path = require('path');
  module.exports = {
      mode: "development",
      //entry指定了打包入口文件路径
      entry: path.join(__dirname,"./src/app.js")
  }
  

  • 配置打包输出路径及文件名

  const path = require('path');
  module.exports = {
      mode: "development",
      entry: path.join(__dirname,"./src/app.js"),
      //output指定了打包出口路径及文件名
      output: {
          //路径
          path: path.join(__dirname,"./dist"),
          //文件名
          filename: "bundle.js"
      }
  }
  

引入loader包

npm i style-loader css-loader less-loader -D

使用loader包

在webpack.config.js中添加配置

const path = require('path');
module.exports = {
    mode: "development",
    enrty: path.join(__dirname,"./src/app.js"),
    output: {
        path: path.join(__dirname,"./dist"),
        filename: "bundle.js"
    },
    //module用来引入loader包，解决webpack默认只能打包js文件的问题
    module: {
        rules: [
            {
                test: /\.less$/,
                //要按顺序使用
                use: ["style-loader","css-loader","less-loader"]
            }
        ]
    }
}

在编译入口文件引入要编译的less文件，例如src/less/style.less文件

import './less/style.css'

执行编译命令

npm run dev

执行打包命令可以生成dist文件夹

webpack