使用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中查看具体的安装版本信息:

  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

  9. 为方便管理,将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 [email protected] -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 [email protected]

    安装完成后对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命令启动项目啦~~~

原文地址:https://www.cnblogs.com/Nancy-wang/p/9926509.html

时间: 2024-10-13 16:09:02

使用webpack搭建react项目 webpack-react-project的相关文章

使用webpack搭建vue项目

有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不

个人搭建的React项目之React音乐播放器

该项目是本人自使用react框架以来制作的较大的项目,目前该项目放在github上,感兴趣的朋友可以去看看一下,觉得还行的话可以给个star,哈哈 地址:https://github.com/cocoxiaoyue/react-music-player 项目环境 运行 1.该项目是基于node环境,通过create-react-app搭建的react项目,所以该项目应在装有node的机器上运行. 2.该项目运用的是网易云音乐接口,所以应该下载网易云音乐接口项目https://github.com

vue+webpack搭建基础项目(非vue-cli)

yarn add vue yarn add webpack yarn add webpack-cli yarn add html-webpack-plugin yarn add webpack-dev-server 创建build.src文件夹 创建index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

搭建React项目环境

1.安装NodeJS6.0以上自带npm依赖包管理工具 2.webstrom 2019.2 工具 1.在cmd输入node -v就可以看到node的当前版本 2.在输入node进入node环境 3.查看npm版本号:npm -v 4.再次输入npm可以看到下面有哪些包 5.下一个全局安装react -app :install create-react-app yarn -g 6. 下面在webstrom工具中创建React项目引用React所需要的依赖 7.项目构架: 启动项目进行访问:npm 

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we

react+es6+webpack环境搭建以及项目入门

前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一下移动端的.看完之后,我内心也勾勒出了一个自己的博客,所以开始正式搭建自己的博客作为项目练手吧. 一,搭建环境 1,安装node 第一步的话首先得确定安装好了node的环境,这个毋庸置疑哈.国外的官网的话好像得FQ,方正我就在node中文网上下载的.(http://nodejs.cn/)安装过程就不

快速搭建yeoman+webpack+react项目和npm start启动命令失败问题

今天准备看着书写一个React小项目来着,结果发现npm start命令简直成了一只拦路虎,从昨晚报错报到了现在...今早花了一上午揪了各种错,把nodejs和npm各种重写卸载了重装还是发现不行,最后...发现我一直是在git bash上操作,重装了npm的淘宝镜像还是缺少了node_moudle里面的各种,所以,改用了cmd命令行重装了npm发现就可以了...为什么在git bash上就不行了呢??这个容我再捣鼓捣鼓先 利用yeoman快速搭建react-webpack开发环境 1.安装ye

webpack搭建react项目

遥看套路挖掘机,不见当年老司机.this is a boilerplate 1.新建一个项目目录文件夹,暂且叫seed cd seed npm init 然后一直回车,最后yes,最终生成一个package.json文件 2.新建以下 src  文件夹用于存放js,css,img等源码和引用的静态文件 .babelrc babel编译器配置文件 favicon.ico   浏览器默认读取的一个icon index.html  入口首页 webpack.config.js  webpack配置文件

react+webpack快速搭建web项目

package.json添加如下代码 "dependencies": { "babel-runtime": "^6.5.0", "react": "^0.14.7", "react-dom": "^0.14.7"}, "devDependencies": { "babel-core": "^6.7.4", &