webpack实现一个react项目

一.基本的概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。
```
module.exports = {
      
      
      entry: './path/to/my/entry/file.js'
 };
```
输出(output)
output.filename属性:告诉 webpack bundle 的名称
output.path 属性:想要 bundle 生成(emit)到哪里
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
```
const path = require('path');
module.exports = {
      
      
       entry: './path/to/my/entry/file.js',
       output: {
      
      
              path: path.resolve(__dirname, 'dist'),
              filename: 'my-first-webpack.bundle.js'
        }
};
```
loader
test 属性:用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性:表示进行转换时，应该使用哪个 loader。
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
```
    const path = require('path');
    const config = {
      
      
          output: {
      
      
          		filename: 'my-first-webpack.bundle.js'
 		  },
 		  module: {
      
      
 		        rules: [
 		            {
      
       test: /\.txt$/, use: 'raw-loader' }
 		    ]
 		  }
     };
```

插件(plugins)
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
      
      
 module: {
      
      
   rules: [
     {
      
       test: /\.txt$/, use: 'raw-loader' }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({
      
      template: './src/index.html'})
 ]
};
module.exports = config;

模式
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化
```
module.exports = {
      
      
  mode: 'production'
};
```

二.练习

三.初始化一个react项目

步骤如下:
1.运行npm init -y快速初始化项目。结果如下:
在这里插入图片描述
2.在项目根目录下创建src源代码目录和dist产品目录。在src目录下创建index.html。
结果如下:

3.运行cnpm i webpack webpack-cli -D安装webpack和webpack-cli插件。文件结果如下:

4.由于webpack 4.x默认约定了打包的入口是src下的index.js，打包的输出文件时dist目录下的main.js。因此在webpack.config.js中可以不设置entry和output，遵循默认路径。当然也可以根据自己的文件设置。
5.在根目录下创建webpack.config文件。设置内容如下:

module.exports={
    
    
    mode:'production'
}

6.运行npx webpack命令，就在终端看到无错误提示时则为成功配置了webpack。
7.实现浏览器可以实时更新的效果。
(1)运行npm i webpack-dev-server -D命令安装webpack-dev-server插件。
(2)在package.json中设置如下内容:

 "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },

8.运行npm run dev命令。倘若成功则证明第七步无误可以正常进行打包。
9.由于webpack自身值支持js文件，因此需要一些插件和loader对其它类型的文件进行处理。在这里介绍的是html文件的处理。
(1)在src目录下创建一个index.html文件。index.html文件中的内容设置如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>777777</div>
</body>
<script src="../dist/main.js"></script>
</html>

(2)index.js中的设置如下:
console.log('mememememe')
(3)运行cnpm i html-webpack-plugin安装htnl-webpack-plugin插件。这个插件可以导入在内存中自动生成的html文件。
(4)在webpack.config.js中写如下内容:

const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new htmlWebpackPlugin({
    
    
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
module.exports={
    
    
    mode:'production',
    plugins:[
        htmlPlugin
    ]
}

(5)运行npm run dev。浏览器结果如下则证明插件使用成功:
在这里插入图片描述
查看元素发现:

那么代表着<script src="../dist/main.js"></script>这行代码已经没有作用了，删去即可。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>Document</title>
</head>
<body>
    <div>777777</div>
</body>
</html>

10.运行cnpm i react react-dom -S安装react和react-dom插件。可以在项目中使用react。
11.在react项目中启用JSX语法。
(1)运行cnpm i babel-loader @babel/core @babel/plugin-transform-runtime -D
(2)运行cnpm i @babel/preset-env @babel/preset-react -D
(3)在根目录下创建.babelrc配置文件。
内容如下:

{
    
    
    "presets":["@babel/preset-react","@babel/preset-env"],
    "plugins":["@babel/plugin-transform-runtime"]
}

文件目录如下:
在这里插入图片描述
(4)在webpack.config.js中添加babel-loader配置项

module.exports={
    
    
    mode:'production',
    plugins:[
        htmlPlugin
    ],
    module:{
    
    
        rules:[
            {
    
    test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}

12.关闭 webpack 的性能提示。
在webpack.config.js中添加如下信息:

    performance: {
    
    
        hints:false
    }

13.一个简单的webpack打包react项目就整理完毕。关于css等等样式文件的webpack打包这里不再赘述。