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. UI：使用 pod 引入 AFNetworking

    cocdpods的安装  参考1  参考2 参考3 注意:MVC是一种搭建项目的思想,不是设计模式. 使用第三方管理控件: 引入CocoaPods的详细步骤:(1)检测有没有引入淘宝镜像gem sou ...

  2. MYSQL自动备份策略的选择(转载)

    原文地址: http://shinepaopao.iteye.com/blog/1938568

  3. ES6躬行记（23）——Promise的静态方法和应用

    一.静态方法 Promise有四个静态方法,分别是resolve().reject().all()和race(),本节将着重分析这几个方法的功能和特点. 1)Promise.resolve() 此方法 ...

  4. postgresql数据库基本信息查看

    切换至postgresql数据库用户pguser 或 postgres(根据自己实际情况) 1.   SELECT version(); 2.对的 2. 查看数据库大小: SELECT pg_size ...

  5. bzoj 4814: [Cqoi2017]小Q的草稿【计算几何】

    //先打个50暴力,10min50分简直美滋滋~ #include<iostream> #include<cstdio> #include<algorithm> u ...

  6. 实现strcat功能

    实现两个字符串相连 1 #include<stdio.h> #include<string.h> //把源字符串连接到目的字符串中 char *strcat1(char *de ...

  7. python正则表达式_总结

    正则表达式: 作用:正则表达式是用来查找字符串的. 之前:使用正则表达式首先要导入re模块(import re) re.match -- 从字符串的第一个单词开始匹配字符串.如果匹配到则返回一个对象: ...

  8. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  9. 基于CentOS6.5或Ubuntu14.04下Suricata里搭配安装 ELK (elasticsearch, logstash, kibana)（图文详解）

    前期博客 基于CentOS6.5下Suricata(一款高性能的网络IDS.IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐) 基于Ubuntu14.04下Suricata(一款高性能的网络ID ...

  10. 移动端UI自动化Appium测试——获取APK的Package及Activity属性值

    1.如果有代码环境,直接在AndroidManifest.xml中查找: package值: Activity值: 2.如果没有开发代码,直接用命令获取: cmd进入到 android-sdk-win ...