webpack简单使用

1、项目生成

npm init
// 并创建webpack.dev.js   用于开发环境
// 并创建webpack.production.js   用于生产环境
复制代码

2、配置

1、entry 文件入口

  entry: "./src/index.js", // 单入口位字符串  
  entry: {
    index: "./src/index.js",
    search: "./src/search.js",
  }, //  多入口为对象  键值对写入
复制代码

2、output 输出文件

  output: {
    path: path.join(__dirname, "dist"), // 输出文件夹  dist目录
    filename: "[name].js", // 打包后的文件名
  },
复制代码

3、module 模块配置

 const path = require("path");
 module: {
    rules: [
       // js  打包
      {
        test: /.js$/,   // 所匹配的文件结尾
        use: "babel-loader",    // 加载器
      },
       // css  打包
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
        // style-loade 加载器将其样式加在标签上  不会单独输出.css文件
      },
       // less  打包
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
       // 图片  打包
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10240,
              // 小于10k时，输出base64格式
            },
          },
        ],
      },
       // 字体  打包
      {
        test: /.(woff|wof2|eot|ttf|otf)$/,
        use: "file-loader",
      },
    ],
  },
复制代码

4、plugin插件

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  plugins: [
  
    new MiniCssExtractPlugin({
      filename: "[name]_[contenthash:8].css",
      // 输出单独的.css文件  同时loader模块需更改
      // 
      // {
      //   test: /.css$/,
      //   use: [MiniCssExtractPlugin.loader, "css-loader"],
      //   单独输出与style-loader 相违背所以改用MiniCssExtractPlugin.loader
      // },
      // {
      //   test: /.less$/,
      //   use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      // },
    }),
    new OptimizeCss({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require("cssnano"),
    }),
    // 压缩输出的css文件  
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/search.html"),
      filename: "search.html",
      inject: true,
      chunks: ["search"],
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false,
      },
    }),
    // 压缩输出的html文件  
  ]
复制代码

hash 文件指纹

// 输出文件名：
output: {
    path: path.join(__dirname, "dist"), // 输出文件夹  dist目录
    filename: "[name]_[chunkhash:8].js", // 打包后的文件名
},
// 字体与文件名：
{
    test: /.(png|jpg|gif|jpeg)$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name]_[hash:8][ext]",
        },
      },
    ],
    },
    {
    test: /.(woff|wof2|eot|ttf|otf)$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name]_[hash:8][ext]",
        },
      },
    ],
},
// css样式名
new MiniCssExtractPlugin({
  filename: "[name]_[contenthash:8].css",
}),
复制代码

hot 热更新

  //package.json文件
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.js",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --config webpack.dev.js --open"
  },
  //webpack.dev.js 文件
  const webpack = require("webpack");
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: "./dist",
    hot: true,
  },
复制代码

另一种方法：

mode 环境

  mode: "development|production",
复制代码

package依赖安装

 "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "cssnano": "^4.1.10",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.0.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.1.3",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
复制代码

特意说下：不同插件及不同版本之间会出现不兼容，导致打包失败的情况，并非配置的问题，这里的版本是我测试过没问题的，如打包失败请按指定版本号安装依赖

// github地址： github.com/838216870/w…