我們現(xiàn)在打包沒有分文件夾准给，如果想把圖片放到img文件夾下宴猾，css放到css文件夾 下怎么辦呢圆存？也很簡(jiǎn)單：
圖片：
在options里加入outputPath即可：

  module: {
    rules: [
    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //圖片大小小于等于limit值仇哆，則會(huì)以base64形式加載沦辙，不會(huì)發(fā)請(qǐng)求讹剔，大于這個(gè)值則用file-loader加載
                        limit: 1*1024,
                        outputPath: 'img/'
                    },
                  },
                ],
            },
    ...
    ],
  },

css就要在壓縮文件的地方配置一下路徑：

    ...
    plugins:[ //存放插件
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板
            filename: 'index.html', //默認(rèn)也是index.html
            minify: {
                removeAttributeQuotes: true, //刪除標(biāo)簽屬性的雙引號(hào)
                collapseInlineTagWhitespace: true, //打包成一行
            },
            hash: true, //增加hash油讯，避免緩存
        }),
        new CleanWebpackPlugin(), //打包之前先刪除原有的
        new MiniCssExtractPlugin({
            filename: 'style.css', //抽離的文件名
        }),
    ],
    ...
    module: {
        rules: [
             ...
            //css-loader 負(fù)責(zé)解析@import語(yǔ)法處理css  style-loader將css插入到head標(biāo)簽中
            { test: /\.css$/, use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../', //這里要注意一下，如果里面有引圖片的話需要驚醒配置
                    }
                },
                {
                    loader: 'css-loader',
                },
                {
                    loader: 'postcss-loader',
                },
            ]},
            ...
        ]
    }
    ...

js也一樣延欠，不再贅述了陌兑。
如果圖片想從服務(wù)器上引，publicPath可以配置成服務(wù)器地址由捎，比如：
htttp://www.xxx.com/

    ...
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        //圖片大小小于等于limit值，則會(huì)以base64形式加載，不會(huì)發(fā)請(qǐng)求软驰，大于這個(gè)值則用file-loader加載
                        limit: 1*1024,
                        outputPath: 'img/',
                        publicPath: 'htttp://www.xxx.com/'
                    },
                  },
                ],
            },
    ...

當(dāng)然publicPath也可以全局配置，這樣就是你引入的文件前全部加入這個(gè)服務(wù)器地址了

    output: {
        filename: 'bundle.[hash].js', //默認(rèn)為main.js  [hash]是為了避免js緩存
        path: path.resolve(__dirname,'./dist'), //path為絕對(duì)路徑锭亏，用node path模塊轉(zhuǎn)化
        publicPath:'htttp://www.xxx.com/'
    },