webpack 不能处理react - CSDN
精华内容
参与话题
  • webpack4 react 搭建:babel升级到7 webpack编译的时候发生很多报错 // 搭建环境 webpack4 babel7 // install webpack npm i webpack webpack-cli webpack-dev-server -g //install react npm i react react-dom...

    webpack4 react 搭建:babel升级到7 webpack编译的时候发生很多报错

    // 搭建环境 webpack4 babel7
    
    // install webpack
    npm i webpack webpack-cli webpack-dev-server -g
    
    //install react 
    npm i react react-dom -S
    
    // install babel 注意babel发生变化
    npm i babel-loader @babel/preset-env @babel/preset-react -D
    
    
    // webpack.config.js
    
    const path = require('path');
    module.exports = {
        mode: 'development',
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    loader: "babel-loader"
                }
            ]
        },
        watch:true
    }
    
    
    // .babelrc
    
    {
        "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
        "plugins": [
            "@babel/plugin-proposal-object-rest-spread",
            "@babel/plugin-transform-runtime"
        ]
    }
    
    
    // package.josn
    
    {
      "name": "demo1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^16.6.3",
        "react-dom": "^16.6.3",
        "@babel/runtime": "^7.0.0"
      },
      "devDependencies": {
        "@babel/core": "^7.1.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
        "@babel/plugin-transform-runtime": "^7.1.0",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-stage-0": "^7.0.0",
        "babel-loader": "^8.0.2",
        "babel-preset-mobx": "^2.0.0"
      }
    }
    
    
    
    展开全文
  • 安装yeoman$ npm install -g yo安装generator-react-webapck$ npm install -g generator-react-webpack新建一个工程cd到工程目录$ yo react-webpack根据提示即可新建一个项目常用命令 启动开发环境服务器$ npm ...

    安装yeoman

    $  npm install -g yo

    安装generator-react-webapck

    $  npm install -g generator-react-webpack

    新建一个工程cd到工程目录

    $ yo react-webpack

    根据提示即可新建一个项目

    可能出现的错误

    常用命令
    启动开发环境服务器

    $  npm start
    //或者
    $  npm run serve

    启动压缩版本的服务器

    $  npm run serve:dist
    //或者
    $  npm run dist

    测试

    $  npm test

    创建新的组件

    $  yo react-webpack:component my/namespaced/components/name

    相关文档
    yeoman官网 http://yeoman.io/
    generator-react-webpack文档 https://www.npmjs.com/package/generator-react-webpack

    展开全文
  • Create-React-App的Webpack配置

    万次阅读 2018-05-10 11:00:12
    随着工程的扩大,单页面应用已经不能适应工程开发的需要了,而create-react-app默认生成的是单出口单入口生产环境,所以我们需要对我们的工程做出一些修改来符合当前的开发进度。 工程修改 前置工作 在工程目录...

    随着工程的扩大,单页面应用已经不能适应工程开发的需要了,而create-react-app默认生成的是单出口单入口生产环境,所以我们需要对我们的工程做出一些修改来符合当前的开发进度。

    工程修改

    前置工作

    在工程目录下,输入npm run eject,工具会给出提示,提示eject为不可恢复操作,输入y或者y开头的单词,即可进行eject。
    eject后,会在目录下发现几个新增的目录 => config,script。
    script的内容为脚手架自己生成的,现在不需要进行更改,我们只需要更改config中的内容即可实现多入口多出口。

    修改配置文件

    配置文件如下:
    这里写图片描述
    很容易就可以看出,webpack.config有两个,一个是dev(开发)环境下的配置文件,一个为prod(生产环境下,即npm run build的配置文件)环境下的配置文件。paths为各种路径,我们可以在这个文件中添加我们自己的路径。
    需要修改的内容其实没多少,主要集中在entry入口跟output出口。

    entry: {
            mainPage:[
                require.resolve('./polyfills'),
                require.resolve('react-dev-utils/webpackHotDevClient'),
                paths.appIndexJs,
            ]
            ,
            registerPage: [
                require.resolve('./polyfills'),
                require.resolve('react-dev-utils/webpackHotDevClient'),
                paths.registerJS
            ],
        },
        output: {
            filename: 'static/js/[name].js',
            publicPath: publicPath,
            // Point sourcemap entries to original disk location (format as URL on Windows)
            devtoolModuleFilenameTemplate: info =>
                path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
        },

    很简单,很容易理解。

    除此之外还需要进行修改的就是HtmlWebpackPlugin。
    这里写图片描述
    对参数进行一下讲解:
    inject参数,是否向目标html末尾添加< script >标签,若添加,添加的src为chunks中所提到的文件(即上文说的那个入口)
    filename参数,生成的目标文件的名称。
    template参数,模板的目录。

    添加path

    这里写图片描述

    修改或添加路径直接修改path就可以

    展开全文
  • 解决webpack打包慢的解决办法汇总

    万次阅读 2016-07-01 17:53:22
    在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都好用。其实这是错误的使用方式。 正确的方式应直接执行webpack --watch 这样webpack会自动编

    刚开始用webpack,谈一谈解决webpack打包慢的问题的方法

    技巧1

    webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用。其实这是错误的使用方式。
    正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍。

    技巧2

    webpack配合的react,jquery一些共有的库去使用,虽然没写几行代码却发现我靠打个文件居然好几M了。能不能不让这些共有库打入我们的文件呢?

    externals: 
            {
                'antd':true,
                'react': 'React',
                'react-dom': 'ReactDOM'
            }

    在webpack配置文件的根上加上这些内容。告诉webpack在require(“react”)的时候不要去加载模块,直接去读(这里还不是很明白,有的说“:”后面是window.React,写了后面可以直接使用无需require,待确定后再补充,一般写true就可以了),当然这种方式要在html入口手动引入js文件:

    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
    <script src="node_modules/antd/dist/antd.min.js"></script>

    在项目中正常使用require(“react”)试试,不会被打进去了,文件变为了几k,突然感觉webpack这东西还是能用的。

    技巧3

    大部分情况下通过技巧2已经可以搞定大部分问题了,但是在用MaterialUI的时候,点击事件总是报一个错误,大概意思是重复的引入了react什么的。如果出现这个问题,那么请使用技巧3。将那些共有的模块打进另外一个文件中,然后使用CommonsChunkPlugin插件,在webpack –watch非第一编打包的时候就不会重复的打另外一个文件了。

    entry: {
            //这是我自己文件的入口,换成自己的
            main: './apps/main.jsx',
            //这个是把外面的东西打包成common.js
            'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']
    
        },
    plugins: [
            //把common.js变为共有的,除第一遍打包后就不会再打包了
            new webpack.optimize.CommonsChunkPlugin('common',  'common.js')
        ]
    output: {
            path: path.resolve(containerPath,'dist/'),
            filename: '[name].js'
        }

    在webpack配置文件的根上加上这些内容,在html入口处需要引入common.js

    //确认一下是不是第一回打包后这个文件已经有了
    <script src="dist/common.js"></script>

    这种方式在webpack -watch后第一遍依旧很慢(因为要打common) 之后修改默认打包是就不会再打common了。而且还有一个优点就是不用再引React,jquery一堆文件了,只引common一个文件就ok。

    展开全文
  • 关于解决webpack版本过高导致的npm start 报错 关于create-react-app npm start webpack 报错 依赖版本4.19.1 刚开始学习react,使用create-react-app创建项目,在npm start运行的时候,控制台报错: F:\React\11-15\...
  • 扩展create-react-app的webpack配置

    千次阅读 2019-03-07 17:22:28
    在创建react项目时,我们一般用create-react-app脚手架来搭建项目。 create-react-app对webpack的配置进行了封装并默认隐藏了配置文件。 当我们需要对webpack的配置进行扩展时,需要执行npm run eject命名将配置文件...
  • TypeError:_WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function 错误形式: 如图: 错误原因 react-redux版本更新到6.0以上,版本更新问题 解决方案 降低react-redux版本,首先将...
  • webpack + react 优化:缩小js包体积

    万次阅读 多人点赞 2016-09-16 21:38:28
    一,前言学校这边的项目刚组建好开发团队,前一段时间都在考虑如何前后...而最近上线的时候发现打包压缩后的js包达到了477k,首屏渲染时间高达4s,首屏渲染时间超过1.5s都是不能忍的,于是开始尝试研究一下webpack,毕竟
  • React webpack配置文件暴露

    千次阅读 2017-07-22 14:16:50
    我们可以通过react官方的脚手架create-react-app新建一个react项目,但是如果你要自己添加一些配置你会发现,新建的项目中并没有任何配置文件,其实webpack相关的配置文件只是被隐藏了,可以通过执行命令:npm run ...
  • webpack4搭建react项目实现前端模块化

    千次阅读 2018-04-28 09:40:45
    webpack4搭建react项目实现前端模块化 首先,你得把node.js,npm装好,然后新建一个文件夹app 1cmd到这个文件夹下输入指令 npm init -y 这时,app 下会生成一个 package.json 文件 2项目中安装 webpack ...
  • 手把手教你使用Webpack打包React项目

    万次阅读 2018-05-10 15:35:49
    先来认识一下webpack的基本配置现在开发搭建开发环境第一步:在react-music-player文件目录下,执行npm init创建package.json文件。这时,代码当中的配置文件就已生成啦:第二步:现在配置文件中...
  • 彻底解决Webpack打包性能问题Starkwang前端工程师@腾讯 / Node.js Collaborator352 人赞了该文章这几天写腾讯实习生 Mini 项目的时候用上了 react 全家桶,当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到...
  • 彻底解决Webpack打包慢的问题

    万次阅读 2016-08-03 09:20:50
    转载自:...这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是,React 加上 Re
  • Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用...
  • react生成之后容量 太大 解决方案

    千次阅读 2020-07-27 23:37:37
    首先你是不是webpack 打包 react之后就悲剧了, 直接出来一个 660k的 js 是不是震惊了 ? 在看看我压缩过的 是不是又震惊了 好 直接告诉你为什么把 首先你得有 webpack.config.js文件 配置下 plugins:...
  • 有人会问 webpack-dev-server 已经是热加载了,做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢?其实这两者的更新是有区别的,webpack-dev-server 的热加载是开发人员修改...
  • React+Webpack打包配置

    千次阅读 2016-10-11 09:21:06
    参考文章:http://www.jianshu.com/p/418e48e0cef1demo 地址:https://github.com/ShadowWalker627/React-Webpack_Demo 如果觉得好,欢迎 start
  • react暴露webpack配置文件

    千次阅读 2018-09-10 09:22:05
    当我们按照官方安装脚手架之后,发现webpack.json特别简洁,然而我们还可以看到有以下配置: "eject": "react-scripts eject" 这个可以暴露配置文件,打开cmd,进入项目目录: yarn ...
  • 本例方法利用yeoman快速搭建React+webpack+es6脚手架由实践总结 一、安装最新的node.js原博文是这样写说的 npm install -g n //首先安装n模块 n stable //升级node.js到最新稳定版 n 5.0.0 //或者指定版本升级 ...
  • 我这边用的最新版的react脚手架,webpack版本已经升级了,去年12之前的它使用的webpack版本还是3.5的版本,如今的脚手架中config文件夹中的配置文件也少了,先上个模板, 实际开发中,难免要暴露webpack配置文件,...
1 2 3 4 5 ... 20
收藏数 34,510
精华内容 13,804
热门标签
关键字:

webpack 不能处理react