美文网首页
webpack 编译 JS, CSS, 图片的配置参考

webpack 编译 JS, CSS, 图片的配置参考

作者: wlianfu | 来源:发表于2018-02-13 10:48 被阅读97次

    上一个配置中省略了这些步骤,这里补上

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    
    const modules = {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            'postcss-loader'
          ]
        },
        {
          test: /\.(sass|scss)$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1
                }
              },
              'postcss-loader',
              'sass-loader'
            ]
          })
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[hash:5].[ext]'
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[hash:5].[ext]'
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[hash:5].[ext]'
          }
        }
      ]
    }
    
    module.exports = modules
    

    相关文章

      网友评论

          本文标题:webpack 编译 JS, CSS, 图片的配置参考

          本文链接:https://www.haomeiwen.com/subject/rwrjtftx.html