react-webpack

Posted 2020-10-22 Nyan

要让webpack知道这就是我们的index.html入口文件，并且我们不需要手动引入打包后的js文件，需要安装html-webpack-plugin

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

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./public/index.html‘, //指定模板路径
            filename: ‘index.html‘, //指定文件名
        })
    ]
}

 react里面的JSX语法普通浏览器可解析不了，需要安装babel来解析

npm install babel babel-cli babel-loader --save-dev

再安装两个分别用于解析es6和jsx语法的插件：

npm install babel-preset-env babel-preset-react --save-dev

module.exports = {
...
  module: {
        loaders: [ //配置加载器
            {
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                loader: ‘babel-loader‘, //使用的加载器名称
                query: { //babel的配置参数，可以写在.babelrc文件里也可以写在这里
                    presets: [‘env‘, ‘react‘]
                }
            }
        ]
    }
}

webpack最重要的配置都在modules（模块）里，loaders（加载器）是处理源文件的，后面你会看到，loader可以处理不同的js（jsx, es6等）编译成js，less等编译成css，将项目中引用的图片等静态资源路径处理成打包以后可以正确识别的路径等

单独编译CSS文件（只在生产环境配置）

为了加载速度更快会把CSS和JS打包到不同的文件中，使用extract-text-webpack-plugin插件可以分离CSS。而其实，开发的时候是不需要单独编译CSS文件的。如果你在开发环境加了这个，又配置了热更新，那么你会发现CSS发生变化时热更新用不了了，所以建议开发环境就不要配置这个了

npm install extract-text-webpack-plugin --save

const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘);

module.exports = {
    //...
    module: {
        loaders: [
            {
                test: /\.css/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./public/index.html‘,
            filename: ‘index.html‘
        }),
        new ExtractTextWebpackPlugin("bundle.css")
    ],
};