webpack3.6.0版本与loaders，plugins版本的兼容性问题解决

webpack3.6.0版本与loaders，plugins版本的兼容性问题解决

1.webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // 1. 入口
  entry: './src/js/main.js',
  // 2. 输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 图片资源有一个公共的输出路径
    // publicPath: 'dist/'
  },
  // 3. 模块
  module: {
    rules: [
      {
        test: /\.css$/,

        // css-loader只负责将css文件加载
        // style-loader负责将样式添加到dom中
        // 使用多个loader从右向左读取
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }
      ]},
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64的文件存储
              // 当加载的图片，大于limit时，需要使用file-loader模块加载
              limit: 8192,
              // 把大于limit的文件分类到dist文件夹
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude 排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // presets: ['@babel/preset-env']
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }]
  },
  // 4. 解析
  resolve: {
    // 扩展名
    extensions: ['.js', '.css', '.vue'],
    // alias：别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  // 5. 配置插件
  plugins: [
    new webpack.BannerPlugin('最终版权归xiao&xin所有'),
    // 导入html文件
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // 压缩文件
    new UglifyjsWebpackPlugin()
  ]
}

2.package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.0.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.13.0",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^2.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0"
  }
}

第一次写文章，非常有幸能读我的文章。如果有错误的地方欢迎指正，或者有什么好方法好建议也强烈欢迎私聊交流一下，希望能帮助到你。