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. Java多线程系列八——volatile和ThreadLocal

    参考资料: http://ifeve.com/java-memory-model-4/ http://www.infoq.com/cn/articles/java-memory-model-1 htt ...

  2. bzoj 3589: 动态树【树链剖分+容斥】

    因为一开始调试不知道unsigned怎么输出就没有加\n结果WA了一上午!!!!!然而最后放弃了unsigned选择了&2147483647 首先链剖,因为它所给的链一定是某个点到根的路径上的 ...

  3. LuoguP1606 [USACO07FEB]荷叶塘Lilypad Pond 【最短路】By cellur925

    最短路好题!] 参考资料:学长 https://blog.csdn.net/TSOI_Vergil/article/details/52975779 学长太强了!!!%%% 题目传送门 ======= ...

  4. 采购发票检验MIRO差异科目设置

    采购订单发票检验时,最终的金额可能跟采购订单的价格不一样,对于这部分差异,系统提供了后台配置科目的方式. 配置科目可通过OBYC,在BSX存货差异配置相关评估类型对应科目. 当库存商品少于采购订单数量 ...

  5. POJ 3683 Priest John's Busiest Day

    看这个题目之前可以先看POJ2186复习一下强联通分量的分解 题意:给出N个开始时间和结束时间和持续时间三元组,持续时间可以在开始后或者结束前,问如何分配可以没有冲突. -----–我是分割线---- ...

  6. Android偏好设置(2)为应用定义一个偏好设置xml

    1.Defining Preferences in XML Although you can instantiate new Preference objects at runtime, you sh ...

  7. 【转】【开源下载】基于TCP网络通信的即时聊天系统（IM系统）（c#源码）

    原文链接 强烈关注,学习!

  8. [转]Open Data Protocol (OData) Basic Tutorial

    本文转自:http://www.odata.org/getting-started/basic-tutorial/ Basic Tutorial The Open Data Protocol (ODa ...

  9. Flutter交互实战－即刻App探索页下拉＆拖拽效果

    前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...

  10. MYSQL5.7 忘记ROOT密码/初始化ROOT密码

    编辑my.cnf允许空密码登录 [root@7Core ~]# vi /etc/my.cnf #在[mysqld]下加入一行 skip-grant-tables=1 重新启动Mysql服务 [root ...