使用webpack构建react项目

Hler

已于 2022-12-02 14:29:15 修改

阅读量380

点赞数

分类专栏： react 前端 js 文章标签： webpack react.js javascript

于 2022-11-26 17:07:44 首次发布

本文链接：https://blog.csdn.net/weixin_45790562/article/details/128052963

版权

react 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前言

本文介绍构建react项目相关的webpack配置
安装好react和react-dom

npm安装指令

--save-dev表示只是在编译过程中所依赖的包，比如webpack，sass-loader，babale等，最后在webpack.config.js的devDependencies中显示
--save表示在编译后运行时还需要依赖的包，比如react、react-dom等，最后在dependencies部分显示。

react项目

准备一个react项目，使用到了styled-components，react是基于react-hooks的
提前安装好webpack，webpack-cli
创建好webpack.config.js，.babelrc看情况，也可以直接在webpack.config.js中配置

配置输入/输出文件

配置输入输出文件，使用webpack-dev-server启动打包好的文件

module.exports = {
    mode: 'production',
    entry: './src/index.js',//入口文件
    output: {//输出
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash].js'
    },
    devServer: {
        static: './dist',
        compress: true,
        port: 9000
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({//运行入口文件
            favicon: './public/favicon.ico',
            template: './public/index.html',
            filename: 'index.html',
            manifest: './public/mainfest.json'
        }),
        new CleanWebpackPlugin({
            root: path.resolve(__dirname, 'dist')
        })
    ]
}

配置babel

安装

npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/plugin-transform-runtime

配置如下

{
    test: /(\.js|\.jsx)$/,
    exclude: /(node_modules)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
            plugins: ['babel-plugin-styled-components', '@babel/plugin-transform-runtime']
        }
    }
},

配置图片加载

安装url-loader

npm install url-loader --save

编写webpack.config.js文件

{
   test: /\.(png|jpg|gif|jpeg)$/,
   use: [
       {
           loader: 'url-loader',
           options: {
               limit: 12000,
               // 打包到dist文件夹重命名
               name: 'img/[name].[hash:8].[ext]'
           }
       }
   ],
   exclude: /node_modules/
},

css文件加载配置

{
   test: /\.(css)$/,
   use: [
       'style-loader',
       'css-loader',
       'post-loader'
   ]
}

打包，启动环境

  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --config webpack.config.js",
  },

运行项目

npm run build
npm run start

访问http://localhost:9000/即可。

综上，初始化一个react项目常用到的plugin和loader有：

loader：babel-loader、babel-core、@babel/preset-react、@babel/preset-env、css-loader、style-loader、url-loader等
plugin：html-webpack-plugin、clean-webpack-plugin等