webpack@3.0+配置react开发环境

最新推荐文章于 2024-04-17 16:06:06 发布

LuckyFBB

最新推荐文章于 2024-04-17 16:06:06 发布

阅读量428

点赞数

分类专栏： webpack 文章标签： React webpack

本文链接：https://blog.csdn.net/LuckyFBB/article/details/84305622

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、项目创建

创建一个文件夹，进入到该目录，执行npm init。所有的提示内容均可以跳过，执行完之后，目录中会多一个package.json文件，该文件为核心文件，包含包依赖管理和脚本任务。

mkdir webpack-demo
cd webpack-demo
npm init

二、安装react，react-dom,webpack

--save的含义是项目上线运行所需要的包(生产环境)
--save-dev是开发环境所需要的包

npm install react react-dom --save
npm install webpack@3.8.1 --save-dev -g

(配置3.0+的webpack，全局安装webpack)

三、项目目录

--your project
   |--dist(项目打包输出目录)
       |--bundle.js(该文件是由webpack打包生成)
       |--index.html　　
   |--src
       |--index.js
   |--package.json
   |--webpack.config.js(webpack配置文件)

四、添加文件

index.html

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

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

webpack.config.js

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, './src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, './dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

五、执行打包

webpack --config webpack.config.js
执行打包之后会报出如图(缺少依赖.png)错误。
因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
再次执行webpack --config webpack.config.js
会报出如图(版本错误.png)错误，babel-core和babel-loader版本对不上

六、简单的优化

index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';

  ReactDOM.render((<App />), document.getElementById('app'));

新建.babelrc文件，提取babel配置

  {
    "presets": [
      "es2015",
      "react"
    ]
  }

修改webpack.config.js

 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       loader: 'babel-loader',
       exclude: /node_modules/
     }
   ]
 }

在src下新建App.js

  import React, { Component } from 'react';

  class App extends Component {
    render() {
      return (
        <div>Hello React!</div>
      );
    }
  }

  export default App;

七、以脚本的方式构建

修改package.json，加入自定义脚本，在项目根目录执行npm run dev即可达到上面一样的效果。

"scripts": {
  "dev": "webpack --config webpack.config.js"
}

八、搭建前端服务器

webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。

npm install webpack-dev-server --save-dev

在src下面新建文件webpackDevServer.config.js

  'use strict'

  const WebpackDevServer = require('webpack-dev-server');
  const config = require('./webpack.config');
  const webpack = require('webpack');
  const path = require('path');
  const compiler = webpack(config);
  const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, './dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    port: 3000, //如果省略，默认8080
    publicPath: "/"
  });
  server.listen(3000, 'localhost', function (err) {
    if (err) throw err
  })

更新package.json

  "scripts": {
    "dev": "node webpackDevServer.config"
  }

⚠️注意⚠️webpack-dev-server和webpack的版本问题，不然会报出如下错误。
webpack-dev-server版本问题.png

九、配置less

添加依赖包

npm install less less-loader style-loader css-loader --save-dev

修改webpack.config.js

{
  test: /\.less$/,
  use: [{
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "less-loader" // compiles Less to CSS
  }]
}

十、添加热更新(HMR)

修改webpackDevServer.config.js

我们使用的是webpack-dev-server，它提供了两种自动刷新方式供我们选择，iframe和inline模式。
const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, './dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
    inline: true, // 自动刷新
    hot: true, // 开启热模块替换
    ···
})

修改webpack.config.js

const webpack = require('webpack');
module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server'
    ···
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'));

if (module.hot) {
  module.hot.accept('./App', () => {
    const App = require('./App').default;
    ReactDOM.render(<App />, document.getElementById('app'));
  })
}

这时候热更新已经实现，但是不能保存组件状态

a. 下载依赖包
  npm install react-hot-loader --save-dev
  npm install babel-polyfill --save
b. 修改webpack.config.js
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    ····  
c. 修改.babelrc
  "plugins": ["react-hot-loader/babel"]   
d. 修改index.js
  import { AppContainer } from 'react-hot-loader';
  import 'babel-polyfill';

  ReactDOM.render((<AppContainer><App /></AppContainer>), document.getElementById('app'));

到此已经使用webpack搭建好简单的React开发环境。???

线上代码：https://gitee.com/LuckyFBB/webpack-react

参照：https://www.cnblogs.com/raion/p/8053799.html

LuckyFBB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack@3.0+配置react开发环境

一、项目创建&amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;nbsp;创建一个文件夹，进入到该目录，执行npm init。所有的提示内容均可以跳过，执行完之后，目录中会多一个package.json文件，该文件为核心文件，包含包依赖管理和脚本任务。mkdir webpack-democd webpack-demonpm init二、安装react，re
复制链接

扫一扫