webpack3适用的依赖版本记录

虽然现在已经出到webpack5，但是公司里面的项目老旧，用的依然是webpack3，学习了一遍webpack3的使用，由于现在的依赖包版本的更新了很多，在webpack3上使用会各种出错，所以记录下适用的版本。

学习资料：

1. Webpack3.X版 成神之路
2. webpack学习记录
3. webpack快速入门——实战技巧

学完后的项目文件：
https://gitee.com/ayaan/webpack3-exercise

package.json

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server",
    "dev": "set type=dev&webpack",
    "build": "set type=build&webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.7",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.0.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.13.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^4.3.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^2.0.0",
    "url-loader": "^1.1.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "browserslist": [
    "last 3 Chrome versions",
    "last 3 Firefox versions",
    "Safari >= 10",
    "Explorer >= 11",
    "Edge >= 12",
    "iOS >= 10",
    "Android >= 6"
  ]
}

webpack.config.js

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
const entry = require("./webpack_config/entry_webpack.js");
const  webpack = require('webpack');
const copyWebpackPlugin = require("copy-webpack-plugin")

if(process.env.type== "build"){
  var website={
      publicPath:"http://192.168.0.104:1717/"
  }
}else{
  console.log( 'kkk',encodeURIComponent(process.env.type) );
  var website={
      publicPath:"http://localhost:1717/"
  }
}

module.exports = {
  devtool: 'eval-source-map',
  //入口文件的配置项
  // entry: {
  //   //里面的entery是可以随便写的
  //   entry: './src/entry.js',
  //   //这里我们又引入了一个入口文件
  //   entry2: './src/entry2.js'
  // },
  // entry: entry.path,
  entry: {
    entry: './src/entry.js',
    jquery: 'jquery'
  },
  //出口文件的配置项
  output: {
    //输出的路径，用了Node语法
    path: path.resolve(__dirname, 'dist'),
    //输出的文件名称
    filename: '[name].js',
    publicPath:website.publicPath
  },
  //模块：例如解读CSS,图片如何转换，压缩
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: extractTextPlugin.extract({
            use: [{
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }],
            // use style-loader in development
            fallback: "style-loader"
        })
      },
      {
        test: /\.less$/,
        use: extractTextPlugin.extract({
            use: [{
                loader: "css-loader"
            }, {
                loader: "less-loader"
            }],
            // use style-loader in development
            fallback: "style-loader"
        })
      },
      {
        test: /\.css$/,
        use: extractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
          ]
        })
      },
      {
         test:/\.(png|jpg|gif)/ ,
         use:[{
             loader:'url-loader',
             options:{
                 limit:500,
                 outputPath:'images/'
             }
         }]
      },
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
      },
      {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader'
        },
        exclude:/node_modules/
      }
    ]
  },
  //插件，用于生产模版和各项功能
  plugins: [
    // new uglify(),
    new htmlPlugin({
      minify:{
        removeAttributeQuotes:true
      },
      hash:true,
      template:'./src/index.html'
    }),
    new extractTextPlugin("/css/index.css"),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
    new webpack.ProvidePlugin({
      $:"jquery"
    }),
    new webpack.BannerPlugin('BannerPlugin插件是webpack自带的插件，用来在打包后文件的头部添加注释'),
    //优化
    new webpack.optimize.CommonsChunkPlugin({
      name:['jquery'], //对应入口文件的jquery(单独抽离)
      filename:'assets/js/[name].js', //抽离到哪里
      minChunks:1 //抽离几个文件
    }),
    new copyWebpackPlugin([{
      from: __dirname + '/src/public',    //要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中
      to: './public'  //要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname
    }])
  ],
  //配置webpack开发服务功能
  devServer: {
    //设置基本目录结构
    contentBase: path.resolve(__dirname, 'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host: 'localhost',
    //服务端压缩是否开启
    compress: true,
    //配置服务端口号
    port: 1717
  },
  watchOptions:{
    poll:1000,//监测修改的时间(ms)
    aggregateTimeout:500, //防止重复按键，500毫米内算按键一次
    ignored:/node_modules/,//不监测
  }
};