javascript - webpack packaged file resource problem
怪我咯
怪我咯 2017-06-26 10:51:08
0
1
978

Using the webpack packaging tool, a problem was discovered after packaging the image resource files.
In the packaging file bundle.js

My pictures refer to relative paths. The entry html and resource files of my online project are separate. Is there any way to directly change the relative position of the referenced image to the absolute position I set when packaging in the production environment?

After looking at other people's plans, some said to modify the output in webpack.config.js.

I set the location for publicPath, but I checked the reference location of the image in bundle.js, and it was still relative. . . . . Solve

const { resolve } = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  context: resolve(__dirname, 'src'),
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test:/\.(png|gif|jpg|jpeg|bmp)$/i,
        use:[
          'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小8kb
          "file-loader?name=images/[hash:8].[name].[ext]"
        ],
      },
      {
        test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i,
        use:[
          'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',//限制大小小于8kb
          "file-loader?name=images/[hash:8].[name].[ext]"
        ],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.scss$/,
        include:resolve(__dirname, 'src'),
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[hash:base64:8]',
          'postcss-loader',
        ]
      },
    ],
  },

  plugins: [
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("Copyright by 309187341@qq.com"),
    // html 模板插件
    new HtmlWebpackPlugin({
        template: __dirname + '/index.html'
    }),
    new webpack.LoaderOptionsPlugin({
        options: {
            postcss: function(){
                return [
                    require("autoprefixer")({   //通过这个插件,能够将CSS3的后缀自动添加上。
                        browsers: ['ie>=8','>1% in CN']
                    })
                ]
            }
        }
    })
  ],
};
怪我咯
怪我咯

走同样的路,发现不同的人生

reply all(1)
迷茫

Don’t package the css into bundle.js. Extract it into a css file separately and try to see the path inside. Then I will see that the publicPath in the webpack you posted is still /. The results of my local test are as follows.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template