通过Webpack从零开始搭建React项目

一、Webpack主要作用:

  1. 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  2. 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  3. 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  4. 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  5. 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  6. 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  7. 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

二、Webpack 有以下几个核心概念:

  1. Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
  2. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  3. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
  4. Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
  5. Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。
  6. Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

三、用Webpack打包WebStorm创建的React项目

    1、安装Webpack和Webpack-cli

              npm  install  webpack  webpack-cli

    2、修改package.json文件中的build为webpack

 "scripts": {
  "start": "react-scripts start",
  "build": "webpack",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

     3、安装以下包

"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^5.2.7",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"less-loader": "^5.0.0",
"node-sass": "^4.14.1",
"sass-loader": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"

指令如:

           npm  install  babel-loader@8.1.0

    注意:包的版本号(版本不匹配,打包会报错)

    4、在项目根目录下创建webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: './src/index.js',  //入口配置

    output: {  //出口配置
        path: path.resolve(__dirname,'build'), //打包文件的输出路径
        filename: "bundle.js" //打包文件名
    },
    module: { //rules、loader
        rules: [{
            test: /\.js$/, //使用正则匹配所有需要使用babel-loader的文件
            use: {
                loader: "babel-loader", //指明要使用的loader
                options: {  //传入loader的参数
                    presets: ["@babel/env", "@babel/react"]
                }
            }
        },
            {
                test: /\.css$/, //使用正则表达式匹配所有需要使用此loader的文件
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.scss$/, //使用正则匹配所有需要使用此loader的文件
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ] //处理顺序依次是:sass-loader -> css-loader -> style-loader
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 30, //30KB以下的文件采用url-loader
                        fallback: 'file-loader', //否则采用file-loader,默认值是file-loader
                        outputPath: 'images' //图片输出路径,相当于output.path
                    }
                }]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 1024 * 30,
                        fallback: 'file-loader',
                        outputPath: 'fonts'
                    }
                }]
            }
        ]
    },
    plugins: [ //插件
        new HtmlWebpackPlugin({
            template: './public/index.html', //指定模板路径
            filename: 'index.html' //指定文件名
        })
    ]
}

   5、配置详解:

       5.1、配置Babel:目前浏览器对ES6的标准支持不全,所以我们需要把ES6转换成ES5

rules: [{
       test: /\.js$/, //使用正则匹配所有需要使用babel-loader的文件
       use: {
          loader: "babel-loader", //指明要使用的loader
          options: {  //传入loader的参数
              presets: ["@babel/env", "@babel/react"]
          }
    }
}

      5.2、自动生成HTML:使用html-webpack-plugin 自动生成HTML,并引入相应文件。

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ //插件
    new HtmlWebpackPlugin({
        template: './public/index.html', //指定模板路径
        filename: 'index.html' //指定文件名
    })
]

     5.3、加载CSS:webpack本身只认得JS文件,其他非JS文件需要用loader进行转换。处理css文件,需要用到以下两个loader:

  • css-loader 负责解析 CSS 代码,主要是为了处理 CSS 中的依赖,例如 @import 和 url() 等引用外部文件的声明。
  • style-loader 会将 css-loader 解析的结果转变成 JS 代码,运行时动态插入 style 标签来让 CSS 代码生效。
{
    test: /\.css$/, //使用正则表达式匹配所有需要使用此loader的文件
    use: [
        'style-loader',
        'css-loader',
    ]
}

       5.4、加载SCSS和less

{
    test: /\.scss$/, //使用正则匹配所有需要使用此loader的文件
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ] //处理顺序依次是:sass-loader -> css-loader -> style-loader
},
{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}

      5.5、加载图片&字体:file-loader, url-loader可用于处理图片,字体等静态资源。

url-loader封装了file-loader:

  • 文件大小小于limit参数时,url-loader将会把文件转为DataURL。
  • 文件大小大于limit,url-loader会调用file-loader进行处理。
{
            test:/\.(png|svg|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 1024 * 30, //30KB以下的文件采用url-loader
                    fallback: 'file-loader', //默认值是file-loader
                    outputPath: 'images' //图片输出路径,相当于output.path
                }
            }]
        },
        {
            test: /\.(eot|ttf|woff|svg)$/,
            use: [{
                loader: "url-loader",
                options: {
                    limit: 1024 * 30,
                    fallback: 'file-loader',
                    outputPath: 'fonts'
                }
            }]
        }
    ]
}

   5.6、模式:在日常的前端开发工作中,一般都会有开发&生产两套构建环境。webpack 4.X新增用mode字段指定当前环境,并启用相应模式下的webpack内置的优化。

module.exports = {
    mode: "development",
}

选项

描述

development

 (开发环境)

process.env.NODE_ENV =development
并启用以下插件:
NamedChunksPlugin , NamedModulesPlugin

production

 (生产环境)

process.env.NODE_ENV =production
并启用以下插件:
FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin , UglifyJsPlugin

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
搭建 React + TypeScript 项目的步骤如下: 1. 创建一个新的项目文件夹 ``` mkdir my-react-ts-app cd my-react-ts-app ``` 2. 初始化项目 ``` npm init -y ``` 3. 安装必要的依赖 ``` npm install --save react react-dom npm install --save-dev typescript @types/react @types/react-dom webpack webpack-cli webpack-dev-server awesome-typescript-loader html-webpack-plugin ``` 4. 创建一个 TypeScript 配置文件 ``` touch tsconfig.json ``` 5. 将以下内容添加到 tsconfig.json 文件中 ``` { "compilerOptions": { "outDir": "./dist/", "module": "es6", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "jsx": "react", "moduleResolution": "node", "esModuleInterop": true }, "include": [ "./src/**/*" ] } ``` 6. 添加一个 index.html 文件到项目根目录 7. 添加以下内容到 index.html 文件中 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My React TypeScript App</title> </head> <body> <div id="root"></div> </body> </html> ``` 8. 创建一个 src 目录 ``` mkdir src ``` 9. 在 src 目录中创建一个 App.tsx 文件 ``` touch src/App.tsx ``` 10. 将以下内容添加到 App.tsx 文件中 ```tsx import React from 'react'; const App = () => { return ( <div> <h1>Hello, World!</h1> </div> ); }; export default App; ``` 11. 在 src 目录中创建一个 index.tsx 文件 ``` touch src/index.tsx ``` 12. 将以下内容添加到 index.tsx 文件中 ```tsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 13. 在项目根目录中创建一个 webpack.config.js 文件 ``` touch webpack.config.js ``` 14. 将以下内容添加到 webpack.config.js 文件中 ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }), ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, }, }; ``` 15. 运行 npm start 启动项目 ``` npm start ``` 以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上庸者-不服周

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值