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. [转]Python3 字典 items() 方法

    原文Python3 字典 items()方法 描述 Python 字典 items() 方法以列表返回可遍历的(键, 值) 元组数组. 语法 items()方法语法: dict.items() 参数 ...

  2. vs 中switch语句快捷键列出枚举

    先switch然后两下tab会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,自动补完所有枚举的case

  3. linux上用mplayer播放264文件

    Linux上,264视频裸码流可用mplayer进行播放. 同时,可用-fps参数控制帧率. 参考:http://www.chinavideo.org/archiver/?tid-16088.html

  4. Codeforces 908F - New Year and Rainbow Roads 【脑洞】

    题意:在一条数轴上有若干'R','B','G'点,连接两个点的代价是位置差,要求使用最小代价使得除去所有'R'点后剩下的所有点联通,除去所有'B'点后剩下的所有点联通. 还以为会是什么最小生成树,结果 ...

  5. 洛谷P4891 序列

    传送门 这题纯暴力竟然能过…… //minamoto #include<cstdio> #include<iostream> #define mul(a,b) (1ll*a*b ...

  6. [Swift]扩展String类：实现find()查找子字符串在父字符串中的位置

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. spring boot+mybatis报错mapper无法注入

    搭建spring boot项目时启动出现的问题,先来看异常片段: Error starting ApplicationContext. To display the conditions report ...

  8. Django MTV模型思想

    一.Django的MTV分别代表: 1.Model(模型):负责业务对象与数据库的对象(ORM) 2.Template(模版):负责如何把页面展示给用户 3.View(视图):负责业务逻辑,并在适当的 ...

  9. Visual studio docker build no such file or directory

    在我构建新的镜像的时候, 发生 了  no such file or directory 的错误.  这个错误找了半天, 没头绪,项目结构是这样的: WebApplication1 建立在根目录下,是 ...

  10. Sqlite数据库中索引的使用、索引的优缺点[转]

    原文链接1   原文链接2 3. 索引的种类 1)聚集索引:表中行的物理顺序与键值的逻辑(索引)顺序相同.因为数据的物理顺序只能有一种,所以一张表只能有一个聚集索引.如果一张表没有聚集索引,那么这张表 ...