【react+webpack】学习总结

最新推荐文章于 2024-05-07 03:35:08 发布

浩瀚星空001

最新推荐文章于 2024-05-07 03:35:08 发布

阅读量338

点赞数

分类专栏： React webpack

本文链接：https://blog.csdn.net/qq_31138973/article/details/79642584

版权

React 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

webpack可以学习下，感觉写的很好

https://segmentfault.com/a/1190000006178770#articleHeader3

一.目录结构如下

二.package.json如下

{
  "name": "reactnews",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

三.index.html


<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>reactnews</title>
</head>

<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>


</body>

</html>

四.index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>hello world!</h1>,
  document.getElementById('root')
)


// //index.js   用js
// var greet = document.createElement('div');
// greet.textContent = "hello world";
// // document.querySelector("#root").appendChild(greet);
// document.getElementById("root").appendChild(greet);

五.webpack.config.js

var webpack = require('webpack')
var path = require('path')

module.exports = {
  devtool: 'eval-source-map',  //生成Source Maps（使调试更容易）
  entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {
    loaders: [
        {
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',  //用来解析react的JSX语法
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
  },
  devServer: {
    //注释  index.html一定要在本地服务器的一级目录下面
    contentBase: __dirname + "/public",//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“dist"目录）
    historyApiFallback: true,//不跳转
    inline: true,//设置为true，当源文件改变时会自动刷新页面
    // port: 8080,  //设置默认监听端口，如果省略，默认为”8080“
  }
};

六.打包与本地服务器的开启

npm run build   //打包为public下的bundle.js

npm run start   //开启本地服务器

七.遇到的问题

1.webpack打包报错： Module build failed: TypeError: fileSystem.statSync is not a function

localhost:ReactNews zhang$ webpack
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.15.0
Time: 1127ms
    + 1 hidden modules

ERROR in ./src/index.js
Module build failed: TypeError: fileSystem.statSync is not a function
    at module.exports (/Users/zhang/Desktop/ReactNews/node_modules/babel-loader/lib/utils/exists.js:7:25)
    at find (/Users/zhang/Desktop/ReactNews/node_modules/babel-loader/lib/resolve-rc.js:13:9)
    at Object.module.exports (/Users/zhang/Desktop/ReactNews/node_modules/babel-loader/lib/index.js:111:132)

原因：babel-loader与webpack版本不匹配问题，

解决方法：

如果babel-loader >= 7.0.0 那么webpack >=2.2.0 

如果webpack 1.x请用babel-loader 6.x

我的版本："babel-core": "^6.26.0","webpack": "^1.13.2"

2.webpack-dev-server启动本地服务器正常，打开浏览器Cannot GET /xxxx

原因：index.html和webpack-dev-server所提供的本地服务器不再同一目录下。

解决方法：

index.html和webpack-dev-server所提供的本地服务器同一目录即可，webpack-dev-server所提供的本地服务器的目录修改webpack.config.js里的contentBase 即可。如我都在public下。

浩瀚星空001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【react+webpack】学习总结

webpack可以学习下，感觉写的很好https://segmentfault.com/a/1190000006178770#articleHeader3一.目录结构如下二.package.json如下{ "name": "reactnews", "version": "1.0.0", "description": "", "mai
复制链接

扫一扫

专栏目录