0

将之前的项目webpack版本升级成v4,在打包的时候遇到了一个问题,打包100%后,程序未结束,一直卡在100%的地方。

贴一下webpack.config.js的配置文件:

const webpack = require('webpack')
const path = require('path')
const Uglify = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const resolvePath = inputPath => path.resolve(__dirname, inputPath)
const VueLoader = require('vue-loader/lib/plugin')
const isProd = process.env.NODE_ENV === 'production'

let webpackConfig = {
  mode: isProd ? 'production' : 'development',
  stats: 'minimal',
  entry: {
    app: [resolvePath('./src/main.js')]
  },
  output: { // 出口文件
    filename: '[name].[hash:8].js',
    path: resolvePath('./dist'),
    publicPath: '/'
  },
  resolve: {
    // require时省略的扩展名,如:require('module') 不需要module.js
    extensions: ['.js', '.vue', '.css'],
    // 别名,可以直接使用别名来代表设定的路径以及其他
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'components': path.join(__dirname, './src/components'),
      'business': path.join(__dirname, './src/views/business'),
      'views': path.join(__dirname, './src/views'),
      'utils': path.join(__dirname, './src/utils')
    }
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file)
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.css$/,
        use: [
          isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.scss/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/',   //在output基础上,修改输出图片文件的位置
              publicPath: '../dist/images/',  //修改背景图引入url的路径
              limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处理
              name: '[hash:8].[ext]'  // hash值为7位,ext自动补全文件扩展名
            }
          }
        ]
      },
      {
        test: /\.(gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [
          {
            loader: 'file-loader?limit=8192&name=images/[name].[ext]'
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          'html-withimg-loader'
        ]
      },
      {
        test: /\.(html|tpl)$/,
        use: [
          'html-loader'
        ]
      }
    ]
  },
  // devtool: 'cheap-module-eval-source-map',
  devServer: {
    historyApiFallback: true,
    inline: true,
    hot: false,
    host: '0.0.0.0',
    disableHostCheck: true
  },
  plugins: [
    // 处理 .vue
    new VueLoader(),
    new webpack.LoaderOptionsPlugin({
      options: {
        babel: {
          presets: ['es2015']
        },
        minimize: true
      }
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: resolvePath('index.html')
    })
  ]
}

if (!isProd) {
  webpackConfig.plugins.push(
  )
} else {
  webpackConfig.plugins.push(
    new Uglify(),
    // new webpack.optimize.OccurrenceOrderPlugin()
  )
}

module.exports = webpackConfig

package.json打包配置如下:

"scripts": {   
    "start": "cross-env NODE_ENV=development webpack-dev-server --public --inline --progress --colors --port 7799",
    "pub": "cross-env NODE_ENV=development webpack --config webpack.config.js --colors --watch --progress",
    "prod": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors --watch --progress"
  },

当运行npm run pub的时候图片描述

如图所示,光标一直停留在这儿,不知道什么原因。

webpack版本:

 "webpack": "^4.18.1",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.4"

node版本:v10.16.0
npm版本:6.9.0

0 个回答

撰写答案

推广链接