image.png

从一个空文件夹开始进行配置

1、新建文件夹webpack，在该文件夹下新建src文件夹，并在src文件夹下新建index.js，将此作为我们打包的入口文件
2、在webpack文件夹下，执行 npm init -y 命令，快速初始化一个package.json文件
3、在webpack文件夹下，安装webpack。 npm i webpack webpack-cli --save-dev
4、可以在index.js文件夹中写一个简单的function，并且新增一个json文件，将json文件引入进index.js中，这样的话，两个文件就产生了依赖关系
5、执行命令
webpack ./src/index.js -o ./dist/bundle.js -- mode=development
webpack 入口文件路径 -o 出口文件路径 --mode=打包模式

打包模式有三个，development（开发环境下打包），production（生产环境下打包），和none（不设置打包模式） 设置模式为生产环境的话，打包出来的文件体积就更小。 因为开发模式下打包，打包出的文件中会有很多的注释和空格，生产环境下则没有

6、执行完上一步命令，即可看到我们的两个文件被打包成了一个js文件的形式
7、可以在src文件夹下再新建一个index.html文件，然后将打包出来的js文件引入进去，在浏览器中运行，就可以看到我们在index.js中打印的东西了

设置配置文件进行配置

  1. let path = require("path"); // 引入node中的path模块
  3. // 这个是将打包后的文件自动引入到html页面中去，使用前要先`npm i html-webpack-plugin`
  4. let HtmlWebpackPlugin = require("html-webpack-plugin");
  5. // 引入完成后，HtmlWebpackPlgin是一个方法，我们需要去调用它
  7. // 1、先用module.exports导出配置。
  8. module.exports = {
  9.     // 入口文件
  10.     entry: "./src/index.js",
  11.     // 出口文件
  12.     output: {
  13.         // 出口文件名称
  14.         filename: "bundle.js",
  15.         // 出口文件地址，要配为绝对路径
  16.         path: path.resolve(__dirname, "dist")
  17.     },
  18.     // 设置开发模式
  19.     mode: "development",
  20.     // loader的配置，放在module中
  21.     module: {
  22.         // 对某个格式的文件进行转换处理
  23.         rules: [
  24.             {
  25.                 test: /\.css$/,    // 匹配的文件后缀，用正则来表示
  26.                 use: [
  27.                     // loader的配置是有顺序的，是从下往上的
  28.                     "style-loader",    // 将转换完的js样式插入到style标签中
  29.                     "css-loader",   //将css文件转换为js
  30.                 ], //  针对这种类型的文件，用什么loader来转换。
  31.             },
  32.             {
  33.                 test: /\.(png|jpg|gif|jpeg)$/,
  34.                 // 图片小于8kb，base64内联处理，可以减少请求数量，但也会导致提交变大
  35.                 use: {
  36.                     loader: "url-loader",
  37.                     options: {
  38.                         limit: 8 * 1024,
  39.                         esModule: false,
  40.                         // 打包后文件名字
  41.                         // [hash.10]取图片hash的前10位
  42.                         // [ext] 取图片文件的扩展名
  43.                         name: "[hash:10].[ext]",
  44.                         // outputPath: "image/"
  45.                     },
  46.                 }
  47.             },
  48.             {
  49.                 test: /\.html$/,
  50.                 loader: "html-loader"
  51.             }
  52.         ]
  53.     },
  54.     // 插件配置
  55.     plugins: [
  56.         new HtmlWebpackPlugin({
  57.             template: './src/index.html'     // 告诉它html的位置。加上这个之后，打包后的文件夹中会有index.html文件
  58.         })
  59.     ]
  60. }
  63. // 整个webpack是用node来做的，node中有一个path模块，它可以获取到当前目录是什么目录
  65. // url-loader
  66. // 可以实现file-loader的一切功能。
  67. // 会把图片转化成base64的字符串。
  68. // 好处：不用额外的请求一个图片的地址
  69. // 坏处：图片大。js文件大，会导致加载js的时间很长，一开始很长的时间，页面上什么东西都显示不出来
  70. // 最佳方式：用url-loader打包8kb以下的图片，节约http请求