使用webpack4从零开始构建react开发环境的案例-创新互联

这篇文章将为大家详细讲解有关使用webpack4从零开始构建react开发环境的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司主要从事成都做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务盘龙,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

项目文件准备:

执行npm init,然后创建如下图所示的文件。

使用webpack4从零开始构建react开发环境的案例

在index.html里面添加



 
  The Minimal React Webpack Babel Setup
 
 
  
    

在webpack.config.js里面添加

module.exports = {
 entry: './src/index.js',
 output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
 },
 devServer: {
  contentBase: './dist'
 }
};

在package.json里面添加

 "scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development"
 },

这样,当执行npm start的时候,就会使用webpack-dev-server把index.js相关文件打包,生成bundle.js,这时候浏览器会打开一个窗口,执行index.html(contentBase里面定义了),又因为index.html里面引入了bundle.js,就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。

安装依赖

npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-react

配置babel

在根目录下新建.babelrc文件,然后添加

{
 "presets": [
  "@babel/preset-env",
  "@babel/preset-react"
 ]
}

在webpack.config.js里面添加babel-loader配置

module.exports = {
 ...
 module: {
  rules: [
   {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
   }
  ]
 },
 resolve: {
  extensions: ['*', '.js', '.jsx']
 }
 ...
};

引入react

npm install --save react react-dom

修改index.js: 这个ReactDOM.render就是把元素渲染到index.html里面id为'app'的元素厦门。在实际开发中,我们会把app.js渲染到这里,然后在app.js里面写redux,react-router构成的页面的起点。

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

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
 
{title}
,  document.getElementById('app') );

配置react热加载

npm install --save-dev react-hot-loader

webpack.config.js

const webpack = require('webpack');

module.exports = {
 ...
 plugins: [
  new webpack.HotModuleReplacementPlugin()
 ],
 devServer: {
  contentBase: './dist',
  hot: true
 }
 ...
};

修改index.js

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

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
 
{title}
,  document.getElementById('app') ); + module.hot.accept();

这个时候执行npm start,就可以在浏览器访问http://localhost:8080看到Index.html里面的内容啦啦。

关于“使用webpack4从零开始构建react开发环境的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:使用webpack4从零开始构建react开发环境的案例-创新互联
标题网址:http://scyanting.com/article/dhhjjs.html

其他资讯