使用webpack搭建react项目 webpack-react-project

Posted coder_Jenny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用webpack搭建react项目 webpack-react-project相关的知识,希望对你有一定的参考价值。

webpack-react-project 使用webpack搭建react项目

webpack搭建react项目 github源码
具体配置信息参照package.jsonwebpack.config.js

  1. 首先创建一个项目文件夹,并进入到该文件夹:

    mkdir react-webpack-project

  2. 初始化项目:npm init 根据提示创建package.json

  3. 通过NPM安装webpack和webpack-cli,其中-D相当于--save-dev: npm install webpack webpack-cli -D,安装完成后可在package.json中查看具体的安装版本信息:
    package.json/devDependencies

  4. webpack4 以上的版本,会默认配置,比如默认的入口文件,默认的输出文件,因此暂时无需额外的配置

  5. 在根目录下新建src文件夹,并在其中创建index.js文件,在文件中写入console.log(\'hello react\');
    6.直接通过npm run dev

  6. package.json 中scripts中配置

     "scripts": {
         "dev": "webpack --mode development",
         "build": "webpack --mode production"
     } 
    
  7. npm run dev,成功打包后,发现项目里多了一个dist文件夹,可通过npm run dev/npm run build分别打包对比生成的main.js的文件大小,npm run build,你会发现main.js文件小了很多

  8. 配置babel编译es6的代码,在根目录下新建.babelrc文件,并写入以下代码:

     {
         "presets": [
             "env"
         ]
     }
    

9.通过npm安装babel
npm install babel-core babel-loader babel-preset-env --save-dev
10. 为方便管理,将webpack.config.js单独创建,与package.json分开,在根目录下创建webpack.config.js文件,写入如下代码:

    // webpack v4
    const path = require(\'path\');
    module.exports = {
    entry: { main: \'./src/index.js\' },
    output: {
        path: path.resolve(__dirname, \'dist\'),
        filename: \'main.js\'
    },
    module: {
        rules: [
        {
            test: /\\.js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader"
            }
        }
        ]
    }
    };
  1. 通过npm run dev发现babel版本过低报错,因此将babel版本升级,安装完成后npm run dev能进行正常打包

    npm i babel-loader@7.1.5 -D

  2. 在dist文件夹下新建index.html文件,并写入以下内容,其中引用了css文件

    Hello, world!
  3. 在src文件下新建style.css,写入任意css表达式,并将其引用至index.js中,再次通过npm run dev出现报错,提示“You may need an appropriate loader to handle this file type”,需要安装配置css-loader

    div{background-color:red};

    import "./style.css";
    console.log("hello, world");

  4. 通过npm下载css-loaderstyle-loader:

    npm install css-loader style-loader -D
    另外还需安装extract-text-webpack-plugin插件(通过@next安装新版本,低版本在webpack4上无法正常运行):

    npm install --save-dev extract-text-webpack-plugin@next
    

    安装完成后对webpack.config.js进行配置,在rules中添加css-loader配置,引入extract-text-webpack-plugin并配置plugins,配置完成后通过npm run dev可正常进行编译

    const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');
    
    {
    test: /\\.css$/,
    use: ExtractTextPlugin.extract(
      {
        fallback: \'style-loader\',
        use: [\'css-loader\']
      })
    }
    
    plugins:[
    new ExtractTextPlugin("styles.css")
    ]
    
  5. 在src下新建index.html文件:

    <html>
        <head>
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <div>Hello, world!</div>
        <script src="main.js"></script>
        </body>
    </html>
    
  6. 安装html-webpack-plugin插件,并进行相应的配置:

    npm install extract-text-webpack-plugin -D
    webpack.config.js中的配置信息如下:
    
        const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
        plugins:[ 
            new ExtractTextPlugin("styles.css"),
            new HtmlWebpackPlugin({
                inject: false,
                hash: true,
                template: \'./src/index.html\',
                filename: \'index.html\'
            })
        ]
    
  7. 基本配置已完成,可将dist文件夹下的内容删除后,运行npm run dev进行编译。详细配置参照package.json及webpack.config.js文件。

  8. 通过配置webpack-dev-server开启web服务器,通过npm安装webpack-dev-server:

    npm install webpack-dev-server -D
    安装完成后,在webpack.config.js中配置devServer:

    devServer:{
    contentBase:path.resolve(__dirname,\'dist\'),
    publicPath:\'/\',
    port:8080,
    historyApiFallback:true
    }
    

最后,在package.json的scripts脚本中写入:

"start": "webpack-dev-server --config webpack.config.js"
现在,就可以通过npm run start命令启动项目啦~~~

以上是关于使用webpack搭建react项目 webpack-react-project的主要内容,如果未能解决你的问题,请参考以下文章

一步步从零开始用 webpack 搭建一个大型项目

基于webpack的React项目搭建

使用webpack和react搭建项目

ES6开发环境快速搭建

ES6开发环境快速搭建

react+webpack+ES6搭建项目