前言

没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。

webpack

理解 webpack

入口 -出口 -装饰器 loader -插件 plugin

创建 webpack 工程

1.生成 package.json npm init -y 2.安装 webpack npm -i webpack webpack-cli npm i -D webpack webpack-cli node 自带 npm npx -S 保存的包是需要发布的 -D 是不需要发布的

webpack 零配置

默认入口 src/index.js 默认出口 dist/main.js npx webpack 只打包 js. 生成 main.js

指定 webpack 配置

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  //入口 出口 loader plugin
  entry: "./src/index.js",
  //指定打包的环境,开发模式
  mode: "development", //production 生产模式

  output: {
    //__dirname 表示当前目录
    path: path.resolve(__dirname, "dist"), //绝对路径
    filename: "index.js", //输出的文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", //指定输出的文件模板
      filename: "main.html", //指定输出dist 文件名改名字
    }),
  ],
};

webpack-dev-server

```js
 npm i -D webpack-dev-server
 //package.json
 scripts: {
dev: "webpack serve",
build:"webpack"
  },

let path=require('path')

let HtmlWebpackPlugin=require("html-webpack-plugin")

module.exports={ //入口出口 loader plugin entry:"./src/index.js", //指定打包的环境,开发模式 mode:'development',//production 生产模式

output:{
    //__dirname 表示当前目录
    path:path.resolve(__dirname,"dist"),//绝对路径
    filename:"index.js"                 //输出的文件名
},
// devServer:{//配置webpack-dev-server
//    port:8083,//配置web服务器端口
//    open:true,//自动打开浏览器
//    progress:true, //进度
//    //contentBase:'./dist' //指定web服务器的根目录


// },
plugins:[
     new HtmlWebpackPlugin({
         template:'./src/index.html',//指定输出的文件模板
         filename:'index.html'//指定输出dist 文件名改名字
     })
]

}

 # 打报css

 ```js
 webpack默认只加载js，不支持加载css
 需要css 装载器 css-loader
 npm i -D css-loader
 style-loader 把cssz直接添加到HTML的style标签里面
 npm i -D style-loader

装载器执行顺序

 先加载 css 后整合到html的<style>
从右到左
  // a.css 文件
   #test{
   color: brown;
}
//index.css 文件
 @import './a.css';

body {
   background-color: blueviolet;
}
// index.js文件
import('./index.css')

//webpack.config.js 文件

let path=require('path')
let HtmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
   //入口 出口 loader plugin
   entry:"./src/index.js",
   //指定打包的环境,开发模式
  mode:'development',//production 生产模式
  
   output:{
       //__dirname 表示当前目录
       path:path.resolve(__dirname,"dist"),//绝对路径
       filename:"index.js"                 //输出的文件名
   },
   // devServer:{//配置webpack-dev-server
   //    port:8083,//配置web服务器端口
   //    open:true,//自动打开浏览器
   //    progress:true, //进度
   //    //contentBase:'./dist' //指定web服务器的根目录


   // },
   module:{
       rules:[
           {
               test:/\.css$/,
               use:['style-loader','css-loader']
           }
       ]
   },
   plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',//指定输出的文件模板
            filename:'index.html'//指定输出dist 文件名改名字
        }),
        new HtmlWebpackPlugin({
           template:'./src/index.html',//指定输出的文件模板
           filename:'main.html'//指定输出dist 文件名改名字
       })
   ]
   
}

less

npm i -D less less-loader
//webpack.config.js 文件
let path=require('path')
let HtmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
   //入口 出口 loader plugin
   entry:"./src/index.js",
   //指定打包的环境,开发模式
  mode:'development',//production 生产模式
  
   output:{
       //__dirname 表示当前目录
       path:path.resolve(__dirname,"dist"),//绝对路径
       filename:"index.js"                 //输出的文件名
   },
   // devServer:{//配置webpack-dev-server
   //    port:8083,//配置web服务器端口
   //    open:true,//自动打开浏览器
   //    progress:true, //进度
   //    //contentBase:'./dist' //指定web服务器的根目录


   // },
   module:{
       rules:[
           {
               test:/\.css$/,
               use:['style-loader','css-loader']
           },
           {
               test:/\.less$/,
               use:['style-loader','css-loader','less-loader']
           }
       ]
   },
   plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',//指定输出的文件模板
            filename:'index.html'//指定输出dist 文件名改名字
        }),
        new HtmlWebpackPlugin({
           template:'./src/index.html',//指定输出的文件模板
           filename:'main.html'//指定输出dist 文件名改名字
       })
   ]
   
}

抽取CSS作为单独的文件

-便于css压缩合并缓存

  npm i -D mini-css-extract-plugin
//webpack.config.js

  let path=require('path')
let HtmlWebpackPlugin=require("html-webpack-plugin")
let MiniCssExtractPlugin=require("mini-css-extract-plugin")

module.exports={
   //入口 出口 loader plugin
   entry:"./src/index.js",
   //指定打包的环境,开发模式
  mode:'development',//production 生产模式
  
   output:{
       //__dirname 表示当前目录
       path:path.resolve(__dirname,"dist"),//绝对路径
       filename:"index.js"                 //输出的文件名
   },
   // devServer:{//配置webpack-dev-server
   //    port:8083,//配置web服务器端口
   //    open:true,//自动打开浏览器
   //    progress:true, //进度
   //    //contentBase:'./dist' //指定web服务器的根目录


   // },
   module:{
       rules:[
           {
               test:/\.css$/,
              // use:['style-loader','css-loader']
              use:[MiniCssExtractPlugin.loader,'css-loader']
           },
           {
               test:/\.less$/,
               //use:['style-loader','css-loader','less-loader']
               use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
           }
       ]
   },
   plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',//指定输出的文件模板
            filename:'index.html'//指定输出dist 文件名改名字
        }),
       new MiniCssExtractPlugin({
           filename:'index.css'
       })
   ]
   
}

css 压缩

css压缩插件： npm i -D optimize-css-assets-webpack-plugin
    css-minimizer-webpack-plugin
 在指定css压缩后,js压缩就无效了.需要再次指定js压缩
js压缩插件： npm i -D terser-webpack-plugin

 let path=require('path')
let HtmlWebpackPlugin=require("html-webpack-plugin")
let MiniCssExtractPlugin=require("mini-css-extract-plugin")
let TerserPlugin=require('terser-webpack-plugin')
let OptimizeCssPlugin=require('optimize-css-assets-webpack-plugin')

module.exports={
  //配置css压缩的插件
  optimization:{
      minimizer:[newTerserPlugin(), new OptimizeCssPlugin()]
  },
  //入口 出口 loader plugin
  entry:"./src/index.js",
  //指定打包的环境,开发模式
 mode:'production',//production 生产模式
 
  output:{
      //__dirname 表示当前目录
      path:path.resolve(__dirname,"dist"),//绝对路径
      filename:"index.js"                 //输出的文件名
  },
  // devServer:{//配置webpack-dev-server
  //    port:8083,//配置web服务器端口
  //    open:true,//自动打开浏览器
  //    progress:true, //进度
  //    //contentBase:'./dist' //指定web服务器的根目录


  // },
  module:{
      rules:[
          {
              test:/\.css$/,
             // use:['style-loader','css-loader']
             use:[MiniCssExtractPlugin.loader,'css-loader']
          },
          {
              test:/\.less$/,
              //use:['style-loader','css-loader','less-loader']
              use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
          }
      ]
  },
  plugins:[
       new HtmlWebpackPlugin({
           template:'./src/index.html',//指定输出的文件模板
           filename:'index.html'//指定输出dist 文件名改名字
       }),
      new MiniCssExtractPlugin({
          filename:'index.css'
      })
  ]
  
}

es6 es7支持

npm i -D babel-loader

npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-decorators

//webpack.config.js
  let path=require('path')
let HtmlWebpackPlugin=require("html-webpack-plugin")
let MiniCssExtractPlugin=require("mini-css-extract-plugin")
let TerserPlugin=require('terser-webpack-plugin')
// let OptimizeCssPlugin=require('optimize-css-assets-webpack-plugin')
let CssPlugin=require('css-minimizer-webpack-plugin')


module.exports={
    //配置css压缩的插件
    optimization:{
        minimizer:[new TerserPlugin(), new CssPlugin()]
    },
    //入口 出口 loader plugin
    entry:"./src/index.js",
    //指定打包的环境,开发模式
   mode:'production',//production 生产模式
   
    output:{
        //__dirname 表示当前目录
        path:path.resolve(__dirname,"dist"),//绝对路径
        filename:"index.js"                 //输出的文件名
    },
    // devServer:{//配置webpack-dev-server
    //    port:8083,//配置web服务器端口
    //    open:true,//自动打开浏览器
    //    progress:true, //进度
    //    //contentBase:'./dist' //指定web服务器的根目录


    // },
    module:{
        rules:[
            //转es6 es7
            {
              test:/\.js$/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:[
                          "@babel/preset-env"
                      ],
                      "plugins":[
                          ["@babel/plugin-proposal-decorators",{"legacy":true}],
                          ["@babel/plugin-proposal-class-properties",{"loose":true}]
                      ]
                  }
              }
            },
            {
                test:/\.css$/,
               // use:['style-loader','css-loader']
               use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.less$/,
                //use:['style-loader','css-loader','less-loader']
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            }
        ]
    },
    plugins:[
         new HtmlWebpackPlugin({
             template:'./src/index.html',//指定输出的文件模板
             filename:'index.html'//指定输出dist 文件名改名字
         }),
        new MiniCssExtractPlugin({
            filename:'index.css'
        })
    ]
    
}

js 模块化支持

 common.js:
 导出：module.exports 导入：require
 es6:
 导出：export default ,export xxx  导入：import xx form xxx

tree shaking(去掉无用的代码)

  webpack4有这个功能，很弱，只支持当前JS 中无用的代码
 webpack5加强了这个功能，
 会检查整个链路中属性的使用情况，确定没有使用就去掉
 只会在生产模式下才会摇树

webpack学习第一篇

前言