webpack4系列第五篇（分类打包文件）

我们现在打包没有分文件夹，如果想把图片放到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/'
    },