webpack使用前的基础知识

webpack使用版本：3.10.0

需要处理文件类型

Html：html-webpack-plugin
脚本：babel + babel-preset-react
样式：css-loader + sass-loader
图片/字体：url-loader + file-loader

webpack常用模块

html-webpack-plugin，html单独打包成文件
extract-text-webpack-plugin，样式打包成单独文件
CommonsChunkPlugin：提出通用的模块（webpack自带）

webpack-dev-server

为webpack项目提供Web服务
使用版本：2.9.7
更改代码自动刷新，路径转发

webpack配置流程

初始化yarn和git，配置gitignore和readme
安装webpack：yarn add webpack@3.10.0 --dev
在根目录创建webpack.config.js，进行如下配置

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
};

根目录创建src文件，在src文件下创建入口文件app.js（这一步创建的文件名以及文件目录和上面webpack.config.js中进行的配置相匹配即可）
此时执行npx webpack即可进行最基本的打包工作

处理html文件的配置
执行yarn add html-webpack-plugin@2.30.1 --dev

在webpack.config.js中添加plugins的配置项，如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
  ]
};

在src目录下创建index.html作为模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react-template</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

处理脚本
执行yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
在webpack.config.js添加module

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
  ]
};

react的处理
执行yarn add babel-preset-react@6.24.1 --dev
和 yarn add react@16.2.0 react-dom@16.2.0
在babel的preset中添加'react'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
  ]
};

处理css
执行yarn add style-loader@0.19.1 css-loader@0.28.1 --dev
在webpack.config.js中添加css匹配rules

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
  ]
};

优化css加载
执行yarn add extract-text-webpack-plugin@3.0.2 --dev
修改css的rules

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new ExtractTextPlugin("index.css") //打包后的文件目录(名)
  ]
};

处理图片
执行yarn add file-loader@1.1.6 url-loader@0.6.2 --dev
添加图片处理项

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
        // babel配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
    //   css配置
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
    //   图片配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new ExtractTextPlugin("index.css") //打包后的文件目录(名)
  ]
};

处理文字
添加配置项

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
        // babel配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
    //   css配置
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
    //   图片配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    // 字体图标配置
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new ExtractTextPlugin("index.css") //打包后的文件目录(名)
  ]
};

提出公共模块，优化dist目录

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/app.js'
  },
  module: {
    rules: [
        // babel配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
    //   css配置
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
    //   图片配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    // 字体图标配置
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    ]
  },
  plugins: [
    // 处理HTML文件
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    // 独立css文件
    new ExtractTextPlugin("css/[name].css") ,//打包后的文件目录(名)
    // 提出公共模块
    new webpack.optimize.CommonsChunkPlugin({
        name : 'commin',
        filename: 'js/base.js'
    })
  ]
};

安装webpack-dev-server
执行yarn add webpack-dev-server@2.9.7 --dev

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath:'/dist/',
    filename: 'js/app.js'
  },
  module: {
    rules: [
        // babel配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
    //   css配置
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
    //   图片配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    // 字体图标配置
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    ]
  },
  plugins: [
    // 处理HTML文件
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    // 独立css文件
    new ExtractTextPlugin("css/[name].css") ,//打包后的文件目录(名)
    // 提出公共模块
    new webpack.optimize.CommonsChunkPlugin({
        name : 'commin',
        filename: 'js/base.js'
    })
  ],
  devServer: {
      port: 8086
  }
};

添加脚本
在package.json的script中进行如下配置

"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist":"node_modules/.bin/webpack -p"
  },

首页的自动跳转
在weboack.config.js中进行devServer的配置

const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath:'/dist/',
    filename: 'js/app.js'
  },
  resolve: {
    alias: {
      pages: path.resolve(__dirname,'src/pages'),
      // page:'./src/pages',
      store: path.resolve(__dirname,'store')
    }
  },
  module: {
    rules: [
        // babel配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
    //   css配置
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
    //   图片配置
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    // 字体图标配置
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'resource/[name].[ext]'
            },
          },
        ],
      },
    ]
  },
  plugins: [
    // 处理HTML文件
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    // 独立css文件
    new ExtractTextPlugin("css/[name].css") ,//打包后的文件目录(名)
    // 提出公共模块
    new webpack.optimize.CommonsChunkPlugin({
        name : 'commin',
        filename: 'js/base.js'
    })
  ],
  devServer: {
      port: 8086,
      historyApiFallback:{ 
        index: '/dist/index.html'
      }
  }
};

原文链接：https://blog.csdn.net/weixin_45578112/article/details/109209278