基于webpack构建React项目

基于webpack构建React项目

一、新建一个webpack_react的文件夹，然后用编辑器打开，并在终端窗口输入命令npm init -y快速初始化项目。

二、在项目根目录下创建src源代码目录和dist产品目录。

1. 在src根目录下建立index.html和index.js
2. 在src根目录下建立components、css、js、img文件夹

三、安装并配置webpack

1. 在终端中运行npm i webpack webpack-cli -D
2. 在项目根目录下建立webpack.config.js文件，配置mode(必选)属性并暴露对象

module.exports={
    //可选值:development(开发环境) | production(生产环环境)
    mode:'development'
}

3. 配置webpack-dev-server
   修改package.json添加如下配置:
   hot: 热加载
   open: 自动打开浏览器; 可以打开指定的浏览器(已经安装过的浏览器), 不指定则打开默认浏览器
   port: 指定开发服务器端口号
   progress: 显示打包进度; 一般不建议打开, 因为会在浏览器控制台显示打包进度

    "scripts": {
        "dev": "webpack-dev-server --hot --open chrome --port 8888 --progress"
     }

运行 npm run dev 即可启动整个工程

4. 配置webpack插件 html-webpack-plugin

• 作用: 根据模板html在内存中创建一个html页面
• 安装: npm i html-webpack-plugin -D

// 引入path路径模块(内置模块, 无需下载)
const path=require('path');
// 引入html-webpack-plugin插件(需要先执行命令`npm i html-webpack-plugin -D`进行安装)
const HtmlWebpackPlugin=require("html-webpack-plugin");
// 创建插件实例对象
const htmlPlugin=new HtmlWebpackPlugin({
    // 指定模板文件
    template:path.join(__dirname,'./src/index.html'),
    // 指定需要在内存中生成的html文件
    filename:"index.html"
});
module.exports={
    mode:'development',
    plugins:[
        htmlPlugin
    ]
}

5. 配置解析jsx语法

• 安装 babel 插件
  • 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 运行npm i babel-preset-env babel-preset-stage-0 -D
• 安装能够识别转换jsx语法的包 babel-preset-react
  • 运行npm i babel-preset-react -D
• 在项目根目录下创建.babelrc配置文件

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

• 在webpack.config.js中添加babel-loader配置项：

module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

• 运行npm i url-loader style-loader css-loader sass-loader node-sass --save安装图片、样式、scss依赖包,并添加相关依赖项：

module: {
        rules: [
            {test: /\.jpg|png|gif|bmp$/, use: 'url-loader'}, // 处理图片
            {test: /\.ttf|svg|eot|woff|woff2$/, use: 'url-loader'}, // 处理字体文件
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader?modules', 'sass-loader']},
            {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    },

• 添加resolve配置寻找模板文件的默认规则

resolve: {
        extensions: ['.js', '.jsx', '.json'], // 可省略后缀名
        alias: {
            "@": path.join(__dirname, './src')  // 设置别名
        }
    }

四、在components文件夹中创建App.jsx根组件

import React from 'react'

export default class App extends React.Component {
    constructor() {
        super()
        this.state = {}
    }

    render () {
        return <div>
            App根组件
        </div>
    }
}

五、配置index.js入口文件

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

import App from './components/App.jsx'

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

至此React项目也就基本搭建起来了

---

注意：babel-loader 与babel的兼容性，babel-loader如果装的是7.x,那么babel就得装成6.x版本否则会出现版本不兼容从而compile failed