webpack笔记

 初始化package.json文件

 npm init -y

 npm安装jQuery  

npm i jquery -S

 npm安装webpack:

 npm i webpack@5.5.1 webpack-cli@4.2.0 -D 

 新建webpack.config.js文件写入
   

 module.exports={
        mode:'developent'
    }   

 自定义打包的入口与出口

         entry指定打包的入口，output指定打包的出口（path、filename）   

 webpack中的插件
        webpack-dev-server：每当修改源代码，webpack会自动进行项目的打包和构建。安装：

npm install webpack-dev-server@3.11.0 -D

        html-webpack-plugin：定制index.html页面的内容,安装：
       

 npm install html-webpack-plugin@4.5.0 -D

  webpack中的loader
    运行

npm i style-loader@2.0.0 css-loader@5.0.1 -D

安装处理css文件的loder
    打包处理less文件：运行

npm i less-loader@7.1.0 less@3.12.2 -D

    打包处理样式表中与url路径相关的文件：
   

 npm i url-loader@4.1.1 file-loader@6.2.0 -D

    安装babel-loader相关的包：
   

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

  
  自动清理掉dist目录中的旧文件，安装配置clean-webpack-plugin插件：
 

  npm i clean-webpack-plugin@3.0.0 -D