webpack动态配置多静态资源路径，动态配置多上线路径,配置less,多种图片引用方式----"webpack": "^4.41.6",

1.项目场景是有两个静态资源目录，一个用于开发，一个用于发布，上线多个版本，打包多个版本后，也要部署到同一个服务器的同一个端口下.

根据我自己的摸索，我搞出来了下面的配置，自感觉还蛮好用的

先看我的config.js 用来控制所有的静态资源目录和打包上线路径,

// /public/config.js 除了以下的配置之外，这里面还可以有许多其他配置，例如,pulicPath 的路径等等
module.exports = {
  dev: {
    template: {
      title: '开发的时候的系统名字',
      header: false,
      footer: false,
      publicPath: '/', 
      publicStaticPath: '../',
      // assetsPath: 'assets/' // 开发正常用
      assetsPath: 'assets_All/' // 开发测试用--这里有很多用不到的模型以及图片，模型太大，为避免被打包，所以用这个了

    }
  },
  build: {
    template: {
      title: '我的友好系统',
      header:true,
      footer:false,
      publicPath: '/hahaha/', // 打包上线之前要改一下这个哦TODU-LIST
      publicStaticPath: '/hahaha/', // 打包上线之前要改一下这个哦TODU-LIST
      // publicPath: '/hahaha1111/', // 打包上线之前要改一下这个哦TODU-LIST
      // publicStaticPath: '/hahaha1111/' // 打包上线之前要改一下这个哦TODU-LIST
      // publicPath: '/hahaha22222/', // 打包上线之前要改一下这个哦TODU-LIST
      // publicStaticPath: '/hahaha22222/' // 打包上线之前要改一下这个哦TODU-LIST,
      assetsPath: 'assets/'
    }
  }
}

再来看一下我的webpack.config.js 用到了上面的配置，但是基本上一般什么都不用动哦~~~

// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
//   module: {
//     rules: [
//       {
//         test:/\.jsx?$/,
//         use: ['babel-loader'],
//         exclude:/node_modules/  //排除 node_modules目錄
//       }
//     ]
//   }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
// 导入terser-webpack-plugin-->减少js体积(其中删除js的console.log和注释)
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
  parallel: 4,
  extractComments: true,
  terserOptions: {
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'], //移除console
    },
  },
})
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const isDev = process.env.NODE_ENV.trim() === 'development' //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //清理dist目錄的插件
const path = require('path') //設置出口使用
const config = require('./public/config')[isDev ? 'dev' : 'build'] //html-webpack-plugin 的 config 的妙用4-2
module.exports = {
  entry: './src/index.js', //webpack的默認配置，也可以寫一個數組
  output: {
    path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
    // filename: 'bundle.js',
    // filename: 'bundle.[hash].js',
    filename: 'bundle.[hash:6].js', //考虑到CDN缓存的问题，我们一般会给文件名加上 hash
    publicPath: config.template.publicPath
  },
  mode: isDev ? 'development' : 'production', //html-webpack-plugin 的 config 的妙用4-3
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  corejs: 3,
                },
              ],
            ],
          },
        },
        exclude: /node_modules|jsm|models/,
      },
      {
        //看清楚啦  這裡有四個loaderloader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
        test: /\.(le|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')({
                    overrideBrowserslist: ['>0.25%', 'not dead'],
                  }),
                ]
              },
            },
          },
          'less-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|gltf|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            // options: {
            //     limit: 10240, //10K
            //     esModule: false
            // }
            // ,
            // 使用上面的那一段運行後會把圖片名字改為MD5哈希值，使用下面的會保留原有名稱加上六位哈希值
            options: {
              limit: 10240, //10K
              esModule: false,
              name: '[name]_[hash:0].[ext]',
              outputPath: config.template.assetsPath, //這個可以將打包後的資源放到指定的文件夾下
              // outputPath: 'assets', //這個可以將打包後的資源放到指定的文件夾下
            },
          },
        ],
        exclude: /node_modules/,
      },
      // {
      //   test: /\.html$/,
      //   use: 'html-withimg-loader'
      // },
    ],
  },
  // resolve: {  // 本想用这个代码来实现JS引入assets资源为相对路径，但是一直报错
  //   alias: {
  //     '@': resolve('src')
  //   }
  // },
  optimization: {
    minimizer: [
      // 只有打包环境为production时才能生效
      terserPlugin,
    ],
  },
  plugins: [
    // 數組，放著所有的webpack插件
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      config: config.template, //html-webpack-plugin 的 config 的妙用4-4
      minify: {
        removeAttributeQuotes: false, //是否刪除屬性的雙引號
        collapseWhitespace: false, //是否折疊空白
      },
      hash: true, //是否加上hash,默認是false
    }),
    new CleanWebpackPlugin(), //清理dist目錄插件，不需要傳參數，它自己可以找到outPath
    // new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!dll','!dll/**']}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/'+ config.template.assetsPath,
          to: config.template.assetsPath,
        },
      ],
    }),
  ],
  devServer: {
    port: '8080', //默認是8080
    quiet: false, //默認不啟動
    inline: true, // 默認開啟inline 模式，如果設置為false, 開啟 iframe模式
    stats: 'errors-only', //終端僅僅打印 error
    overlay: false, //默認不啟用
    clientLogLevel: 'silent', //日誌等級
    compress: true, //是否啟用gzip壓縮
  },
  devtool: 'cheap-module-eval-source-map', //开发环境下使用 打包上线之前要改一下这个哦TODU-LIST
}

// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼2

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
      [
          "@babel/plugin-transform-runtime",
          {
              "corejs": 3
          }
      ]
  ]
}

我的package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "set NODE_ENV=production&& webpack",
    "dev": "set NODE_ENV=development&& webpack-dev-server --host 10.251.134.102",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.6",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^4.2.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.4",
    "@babel/runtime-corejs3": "^7.8.4",
    "copy-webpack-plugin": "^6.0.2",
    "html2canvas": "^1.0.0-rc.7",
    "tween": "^0.9.0"
  }
}

接下来我来放几个代码的使用方式吧~~

// src\index.js
import './index.less'
// 正式版本------------------------
// import './js/indexV1_1.js' // 初版
// import './js/indexV1_2.js' // 初版功能增强
// 测试版本------------------------
// import './js/indexTest_1.js' // 测试版本1
import './js/indexTest_2.js' // 测试版本2
// class Word {
//   constructor(mydata) {
//     this.mydata = mydata
//   }
//   getMydata() {
//     return this.mydata
//   }
// }
// const start = new Word('项目已启动')
console.log('项目已启动')

先来看一下less里的图片引用方式

src\index.less

@color: red;
body {
  background: #020929;
  // div{
  //   color: @color;
  //   transition: all 2s;
  // }
  // background: url('./assets/img/mya.png');
  .panel {
    border: 0;
    width: 400px;
    font-size: 30px;
    line-height: 31px;
    text-indent: 20px;
  }
}

我们再来看一下js的图片引用方式

先来看src\js\tool.js

const isDev = process.env.NODE_ENV.trim() === 'development' 
const config = require('../../public/config')[isDev ? 'dev' : 'build']
const staticUrl = config.template.publicStaticPath
export { staticUrl }

再来看一下src\js\indexV1_2.js

import { staticUrl } from './tool'


var planeTexture = new THREE.TextureLoader().load(
    staticUrl + 'assets/img/equipment/floor.png'
  )

好了，这个就是大概的使用方法了~~ 目前已经试过多次，打包运行什么的没得毛病哦，我觉得还挺好用

希望路过的大佬指点一下有没有更好的办法~~~