初学第一个项目：wepack+react项目（持续更新）

时间：2023-01-13 17:17:45

wepack+react项目

写在前面

1.里面的内容有些是用es6的语法写的，我是初学es6，更多详细用法可以自行gg/baidu，这里有一篇中文文档：来自阮一峰大神 可以先看看

2.环境部署一波三折，这边简单的说明一下，我遇到的问题我另外整理，因为碎片化时间做的，查资料了很多天，所以漏了很多中间遇到的困难，不过有的一看报错就知道解决方法了，有的需要gg。
问题及解决方案<<

环境部署

  1. node.js 安装
  2. webpack 安装
  3. react.js 安装

安装完node.js之后 npm init 生成一个package.json文件（这一步一定要在npm install xxx 之前，如果跳过的话就手动建一个package.json），会出现一个要求输入”package name”光标引导(这个必填，其他的可以一直回车)，按步骤输入就能生成一个含配置的package.json文件。
附：package.json详细说明文档

接下去
1.npm install webpack -g --save-dev 你也可以选择去掉-g不全局安装
2.npm install react --save-dev 这个命令貌似会装一个react和一个react-dom，如果没有react-dom的话再装一下npm install react-dom原因是react版本更新之后分离了原来的功能

项目结构

--webpack.config.js
--package.json
--package-lock.json
--project-name
  |--app
  |  |--components
  |  |  |--component.jsx
  |  |  |--productBox.js
  |  |--less
  |  |  |--theme.less
  |  |--main.js
  |--build
  |  |--bundle.js
  |  |--index.html

webpack.config.js　内容：

一个入口entry, 一个出口output build.js会自动生成在上述build目录中

var path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './app/main.js'),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  }
};

project-name/app/main.js　内容：

'use strict';
var component = require('./components/productBox.js');
document.body.appendChild(component());

project-name/app/components/productBox.js　内容：

module.exports = function () {
    var element = document.createElement('h1');
    element.innerHTML = 'Hello World1';
    return element;
}

index.html　内容：
需要注意的是，<div id="content"></div>或者是其他你后来加的其他渲染元素，都要放到下面两个script标签之上，不然会报找不到Target的错误：#200 Target container is not a DOM element

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Princess doge and yellow fat cat</title>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" srv="http://localhost:8082/webpack-dev-server.js"></script>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

接下来就要试运行项目了，我follow的文档用的是web-dev-server，这个有另一个好处就是可以热加载（vscode/sublime这些编辑器保存之后浏览器直接刷新，不用手动刷新）
所以：
npm install webpack-dev-server -g
npm install webpack-cli -g 虽然好像并没有用到这个但是在搭环境报错的过程中反正就是装了一下，等待大神解答

如果你也想和我一样用es6的语法，还需要npm install babel-loader
用less的话需要：
npm install css-loader style-loader less-loader
但是我加了一个theme.less（见上述文件目录）的时候，会报错：
cannot find module 'less'

所以我就又 npm install less
安装完包之后修改package.json的scripts 还有webpack.config.js之后就可以试运行程序了

package.json　内容：

{
  "name": "xyy",
  "version": "1.0.0",
  "description": "xyy first react package",
  "main": "webpack.config.js",
  "dependencies": { "babel-preset-react": "^6.24.1", "less": "^3.0.4" },
  "devDependencies": { "babel-loader": "^7.1.4", "css-loader": "^0.28.11", "less-loader": "^4.1.0", "react": "^16.3.2", "react-dom": "^16.3.2", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.8.3", "webpack-cli": "^2.1.3", "webpack-dev-server": "^3.1.4" },
  "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --port 8082 --inline --devtool eval --progress --colors --content-base build", "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js" },
  "keywords": [ "xyy" ],
  "author": "xyy",
  "license": "ISC" }

说明：以上的内容是整个完整项目的内容，但是和前面步骤比其实也差不多了，scripts中的build需要首先执行一次，才会生成bundle.js。
在项目路径下面打开终端输入命令 npm run dev
（然后开始了我漫长的gg之路，但是基本都能gg到结果，因为webpack更新到4之后有很多命令都更改/废弃了，所以这篇文章可能到以后还是会有错的，所以github真的是个好东西: webpack 4 所做修改）
dev命令解释：

  1. —port 8082: 不设置端口号的话会默认8080，因为我的8080会被其他项目占用所以换了一个
  2. —inline: 自动刷新页面的模式之一，还有一个是iframe模式，详细介绍文档可以看这篇文章
  3. —devtool eval: 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  4. —progress: 显示合并代码进度
  5. —colors: 命令行中显示颜色
  6. —content-base build：指向设置的输出目录（有文档说和inline要一起使用，这个还待研究）

webpack.config.js　内容：
使用webpack-dev-server并且要热加载的话需要在entry里加上相应配置：

entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8082',
        path.resolve(__dirname, './app/main.js')
    ],

并且加上plugins

plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],

最终的webpack.config.js文件是这样：

var path = require('path');
var webpack = require('webpack');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8082',
        path.resolve(__dirname, './app/main.js')
    ],
    output: {
        path: path.resolve(__dirnamcye, './build'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            query: {
                  presets: ['react']
            }
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
        },{ 
            test: /\.(png|jpg)$/,
            loader: 'url?limit=25000'       
        }],
        noParse: [pathToReact]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
};

注：这里面 ‘style-loader!css-loader!less-loader’ 在我参考的文档里都是简写省略后面的 ‘-loader’ 但是运行npm run dev 会提示加-loader,那就加上好了。
另外，babel-loader里面的query是为了配合react使用的，加上之后解析jsx中react的写法就不会报错了。

以上项目能跑起来的话就可以接下去配合react使用了，我仿造react中文文档最后一个发散性的例子做了一个demo，附上github链接，因为是初学，步骤也不一定写的很详细，很多都没弄明白，所以有什么不对的尽管指出来，共勉。

初学参考的链接：
https://fakefish.github.io/react-webpack-cookbook/Getting-started.html

标签：

相关文章