react webpack

webpack实现模块化

模块化（类）：指的就是一组具有同等属性和功能的集合

react模块化指的就是一个js中存放一个或者多个组件，这些组件通过commonjs规范对外提供接口

在其他组件中可以调试对外提供的接口组件，最核心的功能loader加载器，可以通过不同的加载器引入不同的文件

项目中装依赖

npm i webpack webpack-cli webpack-dev-server react react-dom  --save-dev

配置文件

webpack.config.js　　　　//官网引入

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装的
const webpack = require('webpack'); //访问内置的插件

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }，

　　//配置babel，打包输出

loaders: [{test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: { presets: ['es2015', 'react']}}]

//插件

plugins: [
    new webpack.ProgressPlugins(),
    new HtmlWebpackPlugin({template: './index.html'})
  ]

//配置热更新

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

}; 需要引入模板的话，需要引入plugins插件

　　

main.js　　　　//入口文件，组件的渲染

import React from 'react';
import ReactDOM from 'react-dom';
import Head from './component/Head'

class App extends React.Component{


render{
return(
<div>
</head>
</div>
)
}
}

ReactDOM.render(</App>,document.EelementById('box'))

 

 

index.html　　　　　　//主文件

<div id="box"></div>　　//创建根的dom元素

 

文件夹想要啥建立啥！！！

例如建立个component文件

写入head.js

import React from 'react';


class Head extends React.Component{

render{
return(
<div>
<h2>webpack head</h2>
</div>
)
}
}

export default Head；

安装babel语言转换加载器（官网有）

npm install babel-loader@7 babel-core babel-preset-es2015 babel-preset-react --save-dev

配置babel，打包输出

loaders: [{test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: { presets: ['es2015', 'react']}}]

配置热更新

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

webpack.json配置打包指令

"dev":"webpack-dev-server"

"build":"webpack"

 

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件