webpack and react配置

react

1、初始化webpack项目
npm init -y : 快速构建项目，并配置mode: development

2、配置webpack-dev-server
npm webpack webpack-cli webpack-dev-server

3、配置首页自动生成插件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'./src/index.html'),//源文件
    filename:'index.html' //生成内存中的文件名
});

4、安装react开发
cnpm i react react-dom -S
注意：编辑react总是报错，卸载不了react包，直接删除node_modules ， 然后重新cnpm i就解决了。

5、添加支持jsx语法

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

6、设置css-modules模块化
规则：less或者scss采用模块化，其他第三方.css则采用全局

7、组件化开发
一个采用class组件，一个采用UI组件

list:[
 {id:1, name:"张三",content:"哈哈，沙发"},
 {id:2, name:"李四",content:"哈哈，板凳"},
 {id:3, name:"王五",content:"哈哈，砖头"},
 {id:4, name:"赵六",content:"哈哈，凉席"},
 {id:5, name:"田七",content:"哈哈，楼下山炮"}
]

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'./src/index.html'),//源文件
    filename:'index.html' //生成内存中的文件名
});
// chrome v8语法特性，不支持export default
module.exports = {
    mode: 'development',
    // mode: 'production',
    // 配置可以处理jsx语法的loader    
    // 高版本转换为低版本： babel-core babel-loader babel-plugin-transform-runtime
    // 语法处理： babel-preset-env babel-preset-stage-0
    module:{//要打包的第三方模块
        rules:[
            { test:/\.js|jsx$/, use:'babel-loader',exclude: /node_modules/ },
            { test:/\.css$/, use: ["style-loader","css-loader"]},//启用全局变量
            { test:/\.scss$/,use: ["style-loader","css-loader?modules","sass-loader"]},//启用模块化
            { test:/\.ttf|.woff2|.woff|.eot|.svg$/, use: ['url-loader'] }
        ]
    },
    // 引入插件
    plugins:[htmlPlugin],
    // 配置不识别的拓展插件
    resolve:{
        extensions:['.jsx','.js','.json'],//表示这几个文件后缀名可以不写
        alias: {
            '@':path.resolve(__dirname,'./src')
        }
    }
}