0

打包后的目录结构

│  .babelrc
│  index.html
│  list.txt
│  package-lock.json
│  package.json
│  webpack.config.js
│  
├─dist
│  │  index.html
│  │  
│  ├─css
│  │      main.css
│  │      
│  ├─images
│  │      holder.jpg
│  │      
│  └─js
│          main.bundle.js
│          
└─src
    │  app.js
    │  
    ├─assets
    │      car2.jpg
    │      holder.jpg
    │      
    └─components
            test.css
            test.js

webpack配置文件(版本是^3.8.1)

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Build_Path = path.resolve(__dirname,'dist');

const BuildConfig = {
    entry: './src/app.js',
    output: {
        path: Build_Path,
        filename: 'js/[name].bundle.js'
    },
    module:{
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                          {
                              loader: 'css-loader',
                              options: {
                                  importLoaders: 1
                              }
                          },
                          {
                              loader: 'postcss-loader',
                              options: {
                                  ident: 'postcss',
                                  plugins: (loader) => [
                                      require('autoprefixer')(),
                                      require('cssnano')()
                                  ]
                              }
                          }
                      ]
                  })
              },
              {
                  test: /\.less$/i,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                          'css-loader',
                          {
                              loader: 'postcss-loader',
                              options: {
                                  ident: 'postcss',
                                  plugins: (loader) => [
                                      require('autoprefixer')(),
                                      require('cssnano')()
                                  ]
                              }
                          },
                          'less-loader'
                      ]
                  })
              },
              {
                  test: /\.(png|jpg|gif|svg)$/i,
                  loader: 'file-loader',
                  options:{
                      name: 'images/[name].[ext]'
                  }
              }
        ]
    },
    plugins:[
        new CleanWebpackPlugin([Build_Path],{verbose:false}),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]
};

module.exports = BuildConfig;

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
</head>
<body>
    <div class="wrapper">
        <img src="src/assets/car2.jpg" alt="">
        <div class="box">
            <p>1</p>
            <div class="imgbg"></div>
        </div>
    </div>
</body>
</html>
  • 如上图的打包后的目录结构是我想要的,css/js/images/分别打包出一个对应的文件夹

  • index.html模板文件下有直接引入图片,在css文件中也有用相对路径写出背景图片

问题

  • 如果不用extract-text-webpack-plugin提取css出来,是没有问题的,所以我猜测问题是出在这个插件上,也看到sf上有网友提出这个问题,但是没有很好的解决方案

  • 在查找答案的过程中,有说修改output.publicPath的,也有说在插件下添加options.publicPath的,还有说修改file-loader.options.publicPath,我都有测试,可能是测试的方法不对,都没有达到我想要的效果。

  • 倒是修改file-loader下的name,把images/[name].[ext]改成[name].[ext]就可以,但是不能把图片放在dist/images文件夹下

所以希望各位大神能帮忙解决这个问题,在这里先谢过了!

1个回答

撰写答案