webpack.config.js
module.exports = { module: { rules: [ { test: /\.txt$/, use: \'raw-loader\' } ] } };其中test定义了需要被转化的文件或者文件类型，use定义了对该文件进行转化的loader的类型。该条配置相当于告诉webpack当遇到一个txt文件的引用时（使用require或者import进行引用），先用raw-loader转换一下该文件再把它打包进bundle。
还有其他各种类型的loader，比如加载css文件的css-loader，加载图片和字体文件的file-loader，加载html文件的html-loader，将最新JS语法转换成ES5的babel-loader等等。完整列表请参考 webpack loaders。
Plugin（插件）Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件，所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大，plugin可以监听webpack处理过程中的关键事件，深度集成进webpack的编译器，可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干，webpack自身也基于plugin系统搭建，webpack有丰富的内置插件和外部插件，并且允许用户自定义插件。官方列出的插件有 这些。
与loader不同，使用plugin我们必须先引用该插件，例如：
const webpack = require(\'webpack\'); // 用于引用webpack内置插件 const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: \'./src/index.html\'}) ] }; 实践了解webpack的基本概念之后，我们通过实践来加深理解。接下来，我们使用webpack搭建一个简易的react脚手架。
创建项目首先创建react-webpack-starter项目并使用 npm init 初始化。
安装依赖 安装react npm i react react-dom 安装webpack相关 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader安装webpack-cli后可以在命令行中执行webpack命令；webpack-dev-server提供了简易的web服务器，并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器，省去了重复的手动操作；html-webpack-plugin用于自动生成index.html文件，并且在index.html中自动添加对bundle文件的引用；style-loader和css-loader用于加载css文件。
安装babel相关由于react中使用了class, import这样的es6的语法，为了提高网站的浏览器兼容性，我们需要用babel转换一下。
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader其中@babel/core是babel的核心模块，包含了babel的核心功能；@babel/preset-env支持转换ES6以及更新的js语法，并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码；@babel/preset-react包含了babel转换react所需要的plugin；babel-loader是webpack的babel加载器。
配置webpack在项目根目录下面新建webpack.config.js，内容如下：
webpack.config.js
const path = require(\'path\'); const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); module.exports = { entry: \'./src/index.js\', output: { path: path.resolve(__dirname, \'dist\'), filename: \'bundle.js\' }, module: { rules: [ { test: /\.js$/, exclude: /node_module/, use: \'babel-loader\' }, { test: /\.css$/, use: [\'style-loader\', \'css-loader\'] // 注意排列顺序，执行顺序与排列顺序相反 } ] }, plugins: [ new HtmlWebpackPlugin({ template: \'./src/index.html\' }) ] }其中HtmlWebpackPlugin使用自定义的模版来生成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"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My React App</title> </head> <body> <div id="app"></div> </body> </html> 配置babel在项目根目录下面新建.babelrc文件，配置我们安装的两个babel preset：
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] } 生成react应用根节点