webpack前端项目构建框架续

最新推荐文章于 2024-01-29 14:27:07 发布

原创最新推荐文章于 2024-01-29 14:27:07 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #babel #react #babel-loader #webpack-dev-server

Web前端专栏收录该内容

87 篇文章

订阅专栏

本文详细介绍如何使用Webpack构建React项目，包括配置Babel处理ES6和JSX语法，使用html-webpack-plugin自动注入JS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前一篇文章中，介绍webpack构建普通web项目，一般而言没有太大的意义，我们需要使用webpack构建es6，react等这些新的语法或者特性的项目，因为涉及了很多语法的转换，所以打包的时候，我们需要注意配置。

这个例子中，我们通过webpack构建一个react项目，还是之前的示例，只不过我们使用react语法来实现，另外考虑使用es6的一些语法比如export,import这些来导出或者加入模块。因为涉及到react的jsx语法以及es6的相关语法，所以项目中需要使用babel来转换，我们需要加入babel-core ，babel-loader，babel-preset-env，babel-preset-react这些构建依赖。另外我们需要使用react，我们还需要加入react，react-dom依赖。babel-loader依赖目前最高是8，但是依赖的babel-core是7，但是官方的babel-core最高而且release的版本是6，为了让babel-loader能够正常，我们需要手动增加babel-loader@7.1.5版本来作为依赖。

npm install react react-dom --save

npm install babel-core babel-loader@7.1.5 babel-preset-env babel-preset-react --save-dev

也许你已经注意到了，他们一个是开发中需要的依赖，一个是构建时需要的依赖。他们一个会加入到package.json文件的dependencies下，一个会加入devDependencies下。

改造我们的项目，我们需要修改的文件有greeter.js,index.js,webpack.config.js，新增一个config.json文件，作为greeter.js文件中的一个配置项greeterText的内容。

config.json

{
  "greeterText":"hello,react."
}

greeter.js

import React,{Component} from 'react'
import config from './config'
class Greeter extends Component {
  render(){
    return <div>{config.greeterText}</div>;
  }
}
export default Greeter

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Greeter from './greeter'
ReactDOM.render(
<Greeter />
,
document.getElementById("root"))

webpack.config.js

module.exports = {
  entry: __dirname+"/src/index.js",
  output:{
    path:__dirname+"/public",
    filename:'bundle.js'
  },
  mode:"development",
  devServer:{
    contentBase:__dirname+"/public",
    historyApiFallback:true,
    inline:true
  },
  module:{
    rules :[
      {
      test:/(\.jsx|\.js)$/,
      use : {
        loader:'babel-loader',
        options :{
           presets:['env','react']
        }
      },
      exclude:/node_modules/
      }
    ]
  }
}

运行webpack构建

运行webpack-dev-server --open

浏览器运行结果：

这里可以改进webpack.config.js的配置，就是将presets选项presets:["env","react"]加入到.babelrc中，webpack会自动加载读取这个配置：

.babelrc

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

webpack.config.js就改成这个样子：

module.exports = {
  entry: __dirname+"/src/index.js",
  output:{
    path:__dirname+"/public",
    filename:'bundle.js'
  },
  mode:"development",
  devServer:{
    contentBase:__dirname+"/public",
    historyApiFallback:true,
    inline:true
  },
  module:{
    rules :[
      {
      test:/(\.jsx|\.js)$/,
      use : {
        loader:'babel-loader'
      },
      exclude:/node_modules/
      }
    ]
  }
}

需要注意的是，这里如果在配置module中test正则表达式的时候，如果配置的不太精确，比如test : /(\.jsx|\.js)/ 这样，这种正则既能匹配js也能匹配json，而webpack打包不应该将json文件也来打包，否则会报错，如下所示：

ERROR in ./src/config.json
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/Users/Administrator/Documents/GitHub/webpackdemo/src/config.json: Unexpected token, expected ; (2:
15)

1 | {
> 2 | "greeterText":"hello,react."
| ^
3 | }

出错的原因是将config.json文件也做了打包，这样作为js来解析，肯定会出错。所以test这里需要精确匹配 /(\.jsx|\.js)$/，刨掉json后缀。

另外，我们在开发react项目的时候，经常会发现index.html文件中并没有引入js文件，但是当我们输入npm start进行编译并启动服务的时候，打开的页面会加载很多js，而且react的组件都会被加入进来，前面我们使用了在index.html文件中通过<script type="text/javascript" src="bundle.js"></script>引入了打包好的bundle.js文件，这里我们通过html-webpack-plugin插件来实现不用手动加入任何js文件，就能实现js自动注入的功能。

首先我们需要安装html-webpack-plugin依赖。

npm install html-webpack-plugin --save-dev

其次，我们需要增加一个模板文件：index.tmpl.html文件，就是什么js都不引入的一个html文件。这里，为了与以前的public文件夹区分，我们将index.tmpl.html文件加入app目录，将生成的文件index.html加入到build目录。

index.tmpl.html

<!doctype html>
<html>
  <head>
           <meta charset="UTF-8" />
           <title>html-webpack-plugin</title>
  </head>
  <body>
          <div id="root"></div>
  </body>
</html>

修改 webpack.config.js，加入html-webpack-plugin配置。

var HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: __dirname+"/src/index.js",
  output:{
    path:__dirname+"/build",
    filename:'bundle.js'
  },
  mode:"development",
  devServer:{
    contentBase:__dirname+"/build",
    historyApiFallback:true,
    inline:true
  },
  module:{
    rules :[
      {
      test:/(\.jsx|\.js)$/,
      use : {
        loader:'babel-loader'
      },
      exclude:/node_modules/
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:__dirname+'/app/index.tmpl.html'
    })
  ]
}

构建，并运行，查看结果：

浏览器显示，从标题title看，是新的页面。

我们可以反过来看看，通过html-webpack-plugin生成的页面index.html是什么样子的，和我们之前手工创建的一模一样：

至此，webpack构建除了css-loader,style-loader没有涉及外，基本的构建以及插件我们也接触了，也了解了一些构建的配置和依赖，简单的webpack.config.js文件已经能够看懂了。webpack构建只是项目开发的一小部分，不用花太多的时间折腾，最主要的还是项目本身的编码。