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

webpack搭建react项目 github源码

具体配置信息参照package.json和webpack.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

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-loader和style-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的更多相关文章

  1. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  2. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  3. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  4. 快速搞定用Vue+Webpack搭建前端项目（学习好久了，该写点东西了......）

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  5. 使用Webpack搭建Vue项目

    前提: 1.  借助Node.js环境里的npm来安装, 2.  设置好npm镜像, (比如淘宝的npm镜像:输入 引用 npm install -g cnpm –registry=https://r ...

  6. webpack搭建vue项目，实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  7. 使用webpack搭建vue项目中遇到的问题

    1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...

  8. webpack 搭建vue项目流程

    1.安装node 2.打开命令行输入  npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...

  9. webpack搭建vue项目

    链接:https://blog.csdn.net/qq_42181069/article/details/81137180 __dirname : 文件的绝对路径

随机推荐

  1. 洛谷P1111

    目录 题目 思路 Code 题目 戳 思路 利用Prim求该图的最小生成树,然后找到当中最大的那个数值输出,具体看代码吧,qwq. Code #include<iostream> #inc ...

  2. 项目迁移腾讯云后，用户反馈，https证书不匹配。

    腾讯云大禹高防大禹BGP同一IP绑定多个证书,用户反馈无法匹配我们域名对应证书.但是浏览器是支持的.定位为客户端不支持sni在运维检查lb及高防证书关联无误,定位发现是用户端httpclient没有设 ...

  3. bzoj 2809: [Apio2012]dispatching【dfs序+主席树】

    可并堆就可以,但是想复健一下主席树. 考虑枚举管理者,然后选忍者的时候在子树中贪心的从小到大选.做成dfs序就是选区间内和小于等于k的最多点.可以用主席树,查询的时候在主席树上二分即可 这里注意,为了 ...

  4. synchronized(4)修饰语句块之：synchronized(this)

    synchronized(this) 此时,线程获得的是对象锁.例如: public class Thread8 extends Thread { public void sync_fun() { s ...

  5. java数组实现买彩票（阿基老师的打乱排序思想）

    package com.wh.array; public class Lottery { public static void main(String[] args) { int[] num=new ...

  6. B. Hongcow Solves A Puzzle

    http://codeforces.com/contest/745/problem/B 题目要求的是,给定一个图形,要求里面判断是否有矩形,且仅有一个 就是 XXX.... XXX...X 是不行的, ...

  7. AJPFX分析Android退出应用最优雅的方式

    什么是RS式呢?即Receiver+singleTask .我们知道Activity有四种加载模式,而singleTask就是其中的一种,使用这个模式之后,当startActivity时,它先会在当前 ...

  8. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

  9. OpenGl之旅-—如何使用code blocks创建一个opengl项目

    开始学习opengl啦,练习用的编辑器是code blocks. 首先当然是要清楚如何使用code blocks创建一个opengl项目了. 首先必须先引用opengl的库glut,网上百度下载一个完 ...

  10. QML中使用相对路径

    QML里有三种路径: 默认使用URL路径. "qrc:///filepath".这用来索引资源文件. "file:///绝对路径".这用来索引本地文件系统中的文 ...