webpack 4シリーズ第5編(分類パッケージファイル)

私たちは今フォルダを分けていません.もし画像をimgフォルダの下に置きたいなら、cssをcssフォルダの下に置いたらどうしますか?簡単です:画像:optionsにoutputPathを追加すればいいです.

  module: {
    rules: [
    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //        limit ，   base64    ，     ，       file-loader  
                        limit: 1*1024,
                        outputPath: 'img/'
                    },
                  },
                ],
            },
    ...
    ],
  },

cssはファイルを圧縮する場所にパスを配置します.

    ...
    plugins:[ //    
        new HtmlWebpackPlugin({
            template: './src/index.html', //  
            filename: 'index.html', //    index.html
            minify: {
                removeAttributeQuotes: true, //          
                collapseInlineTagWhitespace: true, //     
            },
            hash: true, //  hash，    
        }),
        new CleanWebpackPlugin(), //          
        new MiniCssExtractPlugin({
            filename: 'style.css', //      
        }),
    ],
    ...
    module: {
        rules: [
             ...
            //css-loader     @import    css  style-loader css   head   
            { test: /\.css$/, use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../', //       ，                
                    }
                },
                {
                    loader: 'css-loader',
                },
                {
                    loader: 'postcss-loader',
                },
            ]},
            ...
        ]
    }
    ...

jsも同様で,これ以上余計なことは言わない.画像をサーバから引用したい場合、publicPathは、htttp://www.xxx.com/などのサーバアドレスとして構成することができる.

    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //        limit ，   base64    ，     ，       file-loader  
                        limit: 1*1024,
                        outputPath: 'img/',
                        publicPath: 'htttp://www.xxx.com/'
                    },
                  },
                ],
            },
    ...

もちろんpublicPathはグローバルに構成することもできます.これは、あなたが導入したファイルの前にこのサーバアドレスにすべて参加することです.

    output: {
        filename: 'bundle.[hash].js', //   main.js  [hash]     js  
        path: path.resolve(__dirname,'./dist'), //path     ， node path    
        publicPath:'htttp://www.xxx.com/'
    },