基于webpack开发React – 汪明鑫的个人博客

什么是Webpack?

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

简单来说，webpack就是项目打包成js的工具。

Webpack的工作方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

安装webpack

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

安装 CLI，没装，会提示你装

npm i webpack-cli -g

当我想确认是否安装成功，输入 webpack -v 可以得到版本号

搭建开发React的webpack环境

1，得到package.json文件

npm init

自动创建这个package.json文件

这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

初始文件里这样就行：

{
  "name": "learnWebpack",
  "version": "1.0.0"
}

2，下载相关包

react:

 npm install react react-dom --save

babel:

npm install babel-core babel-preset-es2015 babel-preset-react --save-dev

 npm install babel-loader

3,webpack配置文件: webpack.config.js

创建这个文件，是webpack执行命令加载的文件

const path = require('path'); //path内置的模块，用来设置路径。

//暴露模块
module.exports = {
    entry: './src/js/main.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            //babel处理js
            {
                test: /\.js$/,
                exclude: /node_modules/, //排除此文件夹
                use: [
                    'babel-loader'
                ]
            }

        ]
    }
    
};

4，babel配置文件: .babelrc

创建一个.babelrc文件，这个文件指定用到babel的功能

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

5,下载css加载器

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

编码

1，src/js/App.js: 应用组件

import React from 'react';

//定义组件
class App extends React.Component{
    constructor(props){
        super(props);
    }

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

//es 6默认暴露，暴露App组件
export default App;

2，src/js/main.js: 入口js

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

import  App from './App';

import '../css/test.css'; //引入样式

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

3，创建css文件 src/css/test.css

body{
    background: red;
}

4,index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <div id="container"></div>

    <script type='text/javascript' src="dist/bundle.js"></script>
</body>
</html>

5，执行命令

webpack 打包