React学习——webpack手动配置

webpakc.config.js配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 创建一个插件的实例对象
const htmlplugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),  // 源文件
    filename: "index.html",      // 生成的内存中首页的名称   
})

// 向外暴露一个打包的配置对象:   因为webpack是基于Node构建的；所以webpack支持所有Node API和语法
// webpack默认只能打包.js后缀名类型的文件，像.png .vue无法主动处理，所以需要配置第三方的loader
module.exports = {
    mode: "development",  // development      production
    // 在webpack 4.x中，有一个很大的特性，就是约定大于配置 ， 默认的打包入口路径是src ->index.js,或者可以设置入口文件entry:"./src/main.js"这样
    // 插件配置
    plugins: [
        htmlplugin
    ],
    // 配置第三方 模块的配置规则
    module: {
        rules: [ // 第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ } // js或jsx文件使用babelloader转换，exclude忽略node_modules文件夹文件
            , {
                test: /\.css$/, use:[{loader:'style-loader'},{loader:'css-loader',options:{modules:{localIdentName:"[path][name]-[local]-[hash:5]"}}}]}, // 打包处理css样式表的第三方loader
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.vue'],
        alias: {
            "@": path.join(__dirname, './src'),   //这样，@符号表示项目根目录src的这一层路径
        }
    }
}