• 使用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命令启动项目啦~~~

  • 相关阅读:
    linux基础知识
    linux运维指令
    redis的三种集群方式
    docker安装tomcat
    cetos7.7安装docker
    Redis和MySQL数据一致中出现的几种情况
    外行人都能看懂的 Spring Cloud,错过了血亏!
    交换机和猫、路由器到底有什么区别
    一次给女朋友转账引发我对分布式事务的思考
    sql merge
  • 原文地址:https://www.cnblogs.com/Nancy-wang/p/9926509.html
Copyright © 2020-2023  润新知