webpack配置react项目小结

webpack配置步骤

1.新建项目执行yarn init -y 初始化项目

2.安装webpack 

npm install webpack webpack-cl  --save-dev

2.项目根目录新建webpack.config.js文件，

const path = require('path');

module.exports = {
    entry: './src/app.jsx',   //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),  //output-path指通过webpack打包的文件要放到那个位置？
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,    //可以让webpack只编译 jsx 或js文件...
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
        ]
    },
    plugins: 
　　　　[
　　　　　　new HtmlWebpackPlugin({
       　　　　 template: './src/index.html',  //表示自己定义的html文件入口  //需要安装插件 html-webpack-plugin
    　　　　}),
   　　　　 new ExtractTextPlugin("index.css"),
　　　　]
};

3. 需要那些插件，就对应去webpack官网找对应的loader...去配置使用，大概也就三个步骤

　　　　1. 安装所需要的依赖包

　　　　2. 在webpack的核心配置文件中配置，有的需要配置在rules里，有的需要配置在plugins里，对照官方文档配置即可，有些模块不要忘记引入。

　　　　

常用的loader大概有... css loader (加载css)、 style loader 、 babel loader（ES6转换ES5） 、 

常用的plugins大概有...  HtmlWebpackPlugin、（执行打包命令后会根据配置生成js入口文件）extract-text-webpack-plugin（打包后会生成index.css文件 )