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. Extjs 3 TreePanel相关操作

    这里说的选中是指鼠标点击一个节点后,节点那一行出现浅蓝色背景的选中,而非checkbox的勾选 方法 Ext.tree.TreePanel.getSelectionModel().getSelecte ...

  2. [知识积累]python3使用xlwt时写入文档字体颜色和边框样式

    可借鉴的网址:https://www.programcreek.com/python/example/39979/xlwt.Alignment 可以直接通过pip安装xlwt 个人理解: xlwt中对 ...

  3. poj 2699 The Maximum Number of Strong Kings【最大流+枚举】

    因为n很小所以从大到小枚举答案.(从小到大先排个序,因为显然胜利场次越多越容易成为strong king.然后对于每个枚举出来的ans建图.点分别表示人和比赛.s向所有人连接流量为胜利场次的边,所有比 ...

  4. #undef及其用法

    简    介 在后面取消以前定义的宏定义 在此程序中,我们将取消在先前程序中对预处理器的定义. #include <stdio.h> int main( void ) { #define ...

  5. AutoCAD2012启动错误 1308 源文件未找到

    启动AutoCAD2012时,弹出错误1308,如图所示: 是何原因? 对CAD的运行有何影响?

  6. poj 3159 Candies dijkstra + queue

    题目链接: http://poj.org/searchproblem 题目大意: 飞天鼠是班长,一天班主任买了一大包糖果,要飞天鼠分发给大家,班里面有n个人,但是学生A认为学生B比自己多的糖果数目不应 ...

  7. 1.1.1最短路（Floyd、Dijstra、BellmanFord）

    转载自hr_whisper大佬的博客 [ 一.Dijkstra 比较详细的迪杰斯特拉算法讲解传送门 Dijkstra单源最短路算法,即计算从起点出发到每个点的最短路.所以Dijkstra常常作为其他算 ...

  8. 暴力 hihoCoder 1178 计数

    题目传送门 /* 暴力:这题真是醉了,直接暴力竟然就可以了!复杂度不会分析,不敢写暴力程序.. 枚举x,在不重复的情况下+ans,超过范围直接break */ #include <cstdio& ...

  9. 题解报告：poj 2299 Ultra-QuickSort（BIT求逆序数）

    Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...

  10. DB2：在缓冲池 "1" 中当前没有任何页面可用。. SQLCODE=-1218, SQLSTATE=57011, DRIVER=3.61.75

    服务器端DB2数据库最近频繁报错: 在缓冲池 , SQLSTATE=, DRIVER= 试验发现简单的查询SQL执行没有问题,复杂的SQL就会报上述错误. 百度发现是因为数据库bufferpool太小 ...