WebPack基础

安装

全局安装： npm install -g webpack webpack-cli
局部安装：npm install webpack webpack-cli --save-dev

执行打包

局部安装webpack:
(1)npx webpack
(2)npm run bulid 需要配置package.json文件
注：需要package.json文件 和 打包想文件夹 要在同一目录下
比如你要打包 src文件夹 就把src文件夹 和package.json文件放到一个目录下。

添加加载器

打包除了 js 和 json 文件 需要单独安装相应的加载器或者插件

cssLoader：npm install style-loader css-loader --save-dev
html插件：npm install html-webpack-plugin --save-dev
LessLoader：npm install less less-loader --save-dev
ScssLoader：npm install sass-loader node-sass --save-dev
图片路径Url Loader：npm install url-loader file-loader --save-dev
HTML图片 Loader：npm install html-loader --save-dev
图标字体 Loader：npm install html-loader --save-dev

配置webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require("path");
module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "js/bundle.js", //出口文件  不写的话 默认生成 main.js
    path: resolve(__dirname, "disk") //出口文件所在目录
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        //先使用less  再使用 css  再使用style
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        //先使用scss  再使用 css  再使用style
        use: ['style-loader', 'css-loader', 'scss-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        //先使用scss  再使用 css  再使用style
        loader: "url-loader", //只有一个loader
        options: {
          //配置图片打包loader
          //图片大小低于8kb的会打包为base64格式,
          //超过的处理为文件格式
          limit: 8 * 1024,
          name: "[hash:10].[ext]",// 打包后文件名字长度为10  保留原来的后缀名
          outputPath: "img" //设置图片打包后输出目录
        }
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          //关闭ES6的模块化
          esModule: false
        }
      },
      //打包其他资源
      {
        //除了  这些文件类型之外的文件 要打包
        exclude: /\.(css|js|html|less|scss|jpg|png|gif)/,
        loader: "file-loader",
        options: {
          name: "[hash:10].[ext]"
        }
      }
    ]
  },
  // loader: {

  // },
  plugins: [
    //配置plugins插件
    //使用html插件
    new HtmlWebpackPlugin({
      template: "./src/index.html",//打包的文件 （模板）
      filename: "index.html" //打包后的文件
    })
  ],
  //产品模式：production   开发模式：development
  mode: "development",
  //下载 指定版本的 webpack-cli@3  这是坑！！！
  devServer: {
    contentBase: "./disk",//resolve(__dirname, 'disk'),
    compress: true,//压缩
    host: 'localhost',
    port: 5656,
    //是否自动打开浏览器
    open: true,
    // 除了一些基本启动信息外，其他内容都不要显示
    //quiet: true
  }
}

webpack-dev-server

express的web服务器(webpack内置服务器) 将打包的html资源自动运行
安装：npm install webpack-dev-server --save-dev
重新下载 指定版本的 webpack-cli 这是大坑！！！
npm uninstall webpack-cli
npm i webpack-cli@3 -D

  devServer: {
    contentBase: "./disk", //或者绝对路径
    compress: true,//压缩
    port: 8080,
    //是否自动打开浏览器
    open: true
  }

执行命令：npx webpack-dev-server

提取css文件

npm i mini-css-extract-plugin --save-dev
webpack.config.js文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { resolve } = require("path");
module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "js/bundle.js", //出口文件  不写的话 默认生成 main.js
    path: resolve(__dirname, "disk") //出口文件所在目录
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    //配置plugins插件
    new MiniCssExtractPlugin({
      filename: "css/style.css",
    })
  ],
  //产品模式：production   开发模式：development
  mode: "development",
}

postcss 解决浏览器兼容性问题

npm i postcss postcss-loader autoprefixer -save-dev
配置webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { resolve } = require("path");
module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "js/bundle.js", //出口文件  不写的话 默认生成 main.js
    path: resolve(__dirname, "disk") //出口文件所在目录
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //引入  postcss-loader
        use: [MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader"]
      }
    ]
  },
  plugins: [
    //配置plugins插件
    //提取css文件
    new MiniCssExtractPlugin({
      filename: "css/style.css",
    })
  ],
  //产品模式：production   开发模式：development
  mode: "development",
}

在项目根目录新建 postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer") //添加浏览器前缀
  ]
}

package.json中添加单独键值对

"browserslist": [
   "defaults",
   "not ie < 11",
   "last 2 versions",
   "> 1%",
   "iOS 7",
   "last 3 iOS versions"
 ]

压缩CSS

安装： npm install css-minimizer-webpack-plugin --save-dev
webpack.config.js

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { resolve } = require("path");
module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "js/bundle.js", //出口文件  不写的话 默认生成 main.js
    path: resolve(__dirname, "disk") //出口文件所在目录
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader"]
      }
    ]
  },
  plugins: [
    //配置plugins插件
    new MiniCssExtractPlugin({
      filename: "css/style.css",
    }),
    new CssMinimizerWebpackPlugin()
  ],
  //产品模式：production   开发模式：development
  mode: "development",
}

打包babel

安装： npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack.config.js

rules: [
    {
     test: /\.m?js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
       loader: 'babel-loader',
       options: {
         presets: ['@babel/preset-env']
       }
     }
   ]

打包多入口文件

webpack.config.js

const { resolve } = require("path");
module.exports = {
entry: {
  home: "./src/index.js",
  other: "./src/index02.js"
},
output: {
  filename: "[name].js", //区分多个文件打包后的名称
  path: resolve(__dirname, "disk") //出口文件所在目录
},
//产品模式：production   开发模式：development
mode: "development",
}

js文件出错了 生成映射文件 方便找错

 mode: "development",
 devtool:"source-map" //生成映射关系 生成map文件

 mode: "development",
devtool:"inline-source-map" //生成映射关系 在生成的文件里添加映射关系 不会产生map文件

 mode: "development",
devtool:"eval-source-map" //生成映射关系 在生成的文件里添加映射关系不会产生map文件

开启监控 不会立即停止打包 而是会监听文件变化 变化之后 自动执行打包

//产品模式：production   开发模式：development
  mode: "development",
  // devtool: "source-map"
  watch: true,
  watchOptions: {
    poll: 10, //每秒轮询10次  是否需要打包
    aggregateTimeout: 200,//防抖 （触发后等待200毫秒 在触发下一次  ）
    ignored: /node_modules/
  }

查看webpack中文文档