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的這一層路徑
        }
    }
}