• react webpack 写的一个音乐播放器小demo
  • react webpack 配置less

    2019-06-20 10:09:08
    修改 config/webpack.config 文件 修改两处: 1.找到 “const sassRegex =” 添加以下代码 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; 2. 找到 “test: sassRegex” //Adds less...

    修改 config/webpack.config 文件
    在这里插入图片描述

    修改两处:
    1.找到 “const sassRegex =” 添加以下代码

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    

    在这里插入图片描述
    2. 找到 “test: sassRegex” 在这里插入图片描述

    //Adds less for less Modules, but using less
                  {
                      test: lessRegex,
                      exclude: lessModuleRegex,
                      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
                  },
                  {
                      test: lessModuleRegex,
                      use: getStyleLoaders(
                          {
                              importLoaders: 2,
                              modules: true,
                              getLocalIdent: getCSSModuleLocalIdent,
                          },
                          'less-loader'
                      ),
                  },
    
    展开全文
  • webpack4废弃了之前的属性比如loder改为rule等,react高版本也不再支持react.render 故对pc搭建开发脚手架更新 第一步: 新建文件reactpc cd reactpc npm init 这时候你会发现reactpc目录下已经多了package,json ...

    因webpack4废弃了之前的属性比如loder改为rule等,react高版本也不再支持react.render
    故对pc搭建开发脚手架更新
    第一步:

    新建文件reactpc
    cd reactpc
    npm init
    

    这时候你会发现reactpc目录下已经多了package,json
    第二步:
    安装依赖,一大堆依赖

    npm install react -s -d react-dom -s babel-core -s -d   babel-loader -s -d  css-loader -s -d   react-hot-loader -s -d webpack-dev-server -s -d  react-router -s -d  webpack -s -d    webpack-cli -s -d   babel-preset-react -s -d  babel-preset-es2015 -s -d    babel-preset-stage-0 -s -d 
    

    下面对上边的依赖做个说明

    
     1. -s -d 分别表示安装依赖到生产环境和开发环境
     2. react和react-dom是开发react必须的核心
     3. babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。ES6现在浏览器都支持的不够, nodejs的v8同样, 即使用use strict, 很多特性也都不支持,babel可以把es6转成传统的javascript, 就可以正常在浏览器中运行了, es6是发展方向
     4. css-loader解释(interpret) @import 和 url() ,会 import/require() 后再解析(resolve)它们。
     5. react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件
     6. webpack-dev-server 能做到只要代码修改了页面也自动更新了,但webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面
     7. react-router 路由
     8. webpack webpack环境
     9. webpack-cli 在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。所以可以尝试全局安装webpack-cli
     10.  babel-preset-react -s -d  babel-preset-es2015 -s -d    babel-preset-stage-0 -s -d 是把浏览器不支持的js转译成浏览器支持的js(这也是babel的核心意义)
    
    

    第三步:

    如果你之前没用过webpack,可以先去官网看下,解释的也挺清楚的
    官网地址:https://www.webpackjs.com/concepts/
    新建webpack.config.js

    const path=require('path');
    const webpack = require('webpack');
    module.exports = {
        mode: "development", //webpack要指定编译类型,可在此处写,也可用命令写
        entry: [
            'webpack/hot/only-dev-server',
            "./src/main.js"//入口文件
        ],
        output: {
            path: path.resolve(__dirname, './build'),//输出目录及文件
            filename: 'bundle.js'
        },
        module: {
            rules: [//此处不能在用loders,需用rules
                {
                    test: /\.js|jsx$/,
                    loader: 'babel-loader',//转化成浏览器能解析的js
                    query:{
                        presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react
                    }
                },
                { test: /\.css$/, use: "style!css" }//css样式处理
            ]
        },
        plugins: [
            new webpack.NoEmitOnErrorsPlugin(),//错误处理
            new webpack.HotModuleReplacementPlugin()//热更新插件和react-hot-loader配合使用
        ],
    
    }
    

    新建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="./build/bundle.js"></script>
    </body>
    </html>
    

    新建src文件夹,在其内新建main.js

    import React from 'react';
    import ReactDOM from 'react-dom';//react高版本需用react-dom
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );
    

    第四步:
    在package.json 里加入

     "scripts": {
        "start": "webpack-dev-server --hot --progress --colors",
        "build": "webpack --p --progress --colors"
      },
    

    整体文件:

    {
      "name": "reactagain",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot --progress --colors",
        "build": "webpack --p --progress --colors"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^1.0.1",
        "react": "^16.6.3",
        "react-dom": "^16.6.3",
        "react-hot-loader": "^4.3.12",
        "react-router": "^4.3.1",
        "webpack": "^4.25.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      },
      "devDependencies": {
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1"
      }
    }
    
    

    至此已经完成了react的脚手架搭建
    现在可以直接运行

    npm start
    

    也可以先编译:

    npm run build
    

    快起尝试吧

    如果有报错,可尝试,把node_modules删除,然后把上述的package.json复制到项目中,然后npm install,这样可解决因为babel版本不一致导致的报错,比如babel版本既有7又有6版本的情况

    最后提供源代码下载地址:https://download.csdn.net/download/qq_34117170/10787025

    展开全文
  • module.exports = { entry:"./app.js",//入口文件 output:{ path:__dirname,//输出的目录 filename: 'bundle.js'//输出的文件名称 },...,//便于调试,相当于命令行中 webpack --devtool source-map ...
    module.exports = {
        entry:"./app.js",//入口文件
        output:{
            path:__dirname,//输出的目录
            filename: 'bundle.js'//输出的文件名称
        },
        devtool:"source-map",//便于调试,相当于命令行中 webpack --devtool source-map
        module: {//依赖的模块
            rules: [//模块、规则,如果在webpack旧版本中用的不是rules。用的是loaders
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    query:{//es6预设
                    presets:["es2015","react"],
                    }
                },
                {
                    test: /\.css$/,
                    exclude: /node_modules/,
                    loader: 'style!css?module&localIdentName=[hash:base64:5]&-url'
                },
                {
                    test: /\.scss$/,
                    exclude: /node_modules/,
                    loader: 'style-loader!css-loader!sass-loader'
                },
                {//背景图片
                    test:/\.(jpg|png|gif)$/,
                    loader:"url-loader?limit=1024"
                },
                {//字体文件
                    test:/\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                    loader:'file-loader?name=[name].[ext]'
                }
        
            ]
        },
        devServer: {
            host: '0.0.0.0', //可以适用与手机浏览器
            port: 5000 //端口
        }
    }
    展开全文
  • React Webpack中,用来配合css-loader模块中的modules使用
  • 在做jest提升后,找到webpack.config.prod.js文件。路径/config/webpack.config.prod.js 找到constshouldUseSourceMap=process.env.GENERATE_SOURCEMAP!=='false';将这一行代码注释 在下面添加一行...

    webpack 4.x

    1、在做jest提升后,找到webpack.config.prod.js文件。路径/config/webpack.config.prod.js
    2、找到const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';将这一行代码注释
    3、如果第二条改动依旧无效,找到“devtool”属性,更改为"cheap-module-source-map",参考官网配置:https://www.webpackjs.com/configuration/devtool/
    4、在下面添加一行 const shouldUseSourceMap = true;
    5、重启终端,重新打包

    注意:开启Map仅针对测试、内部版本调试找问题方便。真实上线依旧建议保留原有代码,减小代码体积

    展开全文
  • 我们可以通过react官方的脚手架create-react-app新建一个react项目,但是如果你要自己添加一些配置你会发现,新建的项目中并没有任何配置文件,其实webpack相关的配置文件只是被隐藏了,可以通过执行命令:npm run ...

    我们可以通过react官方的脚手架create-react-app新建一个react项目,但是如果你要自己添加一些配置你会发现,新建的项目中并没有任何配置文件,其实webpack相关的配置文件只是被隐藏了,可以通过执行命令:npm run eject 把webpack的相关配置文件暴露出来,注意执行这个命令前,需要吧本地代码提交。
    --------------------- 
    版权声明:本文为CSDN博主「王先发」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_38453189/article/details/75733021

    展开全文
  • 1、搭建React项目 创建文件夹 执行 npm init初始化项目 安装react,react-dom两个库(react为核心库,...2、项目添加webpack4 安装项目依赖: 必备基础模块: npm install --save-dev webpack webpack...
  • 这是Webpack+React系列配置过程记录的第四篇。其他内容请参考: 第一篇:使用webpack、babel、react、antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 第三篇:优化单页面开发...
  • 上一篇记录了一下webpack4使用的一些基础使用小技巧,确实没有想到能收获这么大的反响,还是非常感谢各位的错爱,没有看过的关于webpack4的14个知识点,童叟无欺 这一篇文章将reactwebpack4进行结合,集webpack的优势...
  • react-webpack2-完整案例

    2018-01-09 15:36:03
    react-webpack 2 - 完整配置案例 ... react16 + react-router4 + webpack开发环境搭建 1.先定义一些配置常量 /webpack/config.js // 引入 node.js path 模块 const path = require('path'); //
  • 1).新建mynew-react-web文件夹; 2).cd mynew-react-web; 3).npm init,此时会有一个package....4).npm install webpack webpack-dev-server --save-dev; 5).npm install babel-core babel-loader --save-dev;
  • React+Webpack配置开发项

    2018-03-20 11:36:27
    一、React+Webpack 3.10基本配置 首先:初始化npm init 1、安装react 模块 npm install -g react npm install -g react-dom 2、安装依赖包 npm install babel -g npm install webpack -g npm install ...
  • react+webpack4+typescript搭建项目 公司项目打算从vue框架转成react,所以自学了下如何用webpack4搭建react+typescript的项目,虽说有脚本架create-react-app直接搭建,公司大佬也正在自己封装属于自己的脚本架,...
  • 1、使用 cnpm run eject 命令暴露 webpack.config.js 2、页面已经有 验证规则,less 没有,所以添加 less 的 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; 3、依葫芦画瓢,复制...
  • webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5...
  • 环境搭建 创建一个空文件夹, 进入当前文件夹下命令行窗口, git bush here也可以. 输入命令npm init, 通通按回车, 最后会输出一个package.json, 现在打开该文件, 接着刚刚生成那些东西, 下面写上这些devDependencies...
  • React+webpack热更新配置

    2018-08-22 18:12:28
    首先安照webpack4.x热更新配置 在react项目中发现修改css文件可以热更新; 修改js文件不会热更新,报: Ignored an update to unaccepted module,The following modules couldn’t be hot updated: (They would ...
1 2 3 4 5 ... 20
收藏数 32,575
精华内容 13,030
热门标签