Vue3.2+Webpack5.8项目JS/CSS打包优化及资源存放咨询

1. 源文件的合理存放位置 #

• 若希望文件仅原样复制到dist、不经过Webpack处理：继续放在public目录下即可，但建议调整结构，比如用public/vendor存第三方原库，public/vendor-modified存你修改后的版本，便于维护。
• 若希望文件被Webpack打包处理（压缩、合并等）：移到src/assets目录下，Webpack会将其纳入构建流程，后续可通过配置实现按需打包。

2. 用Webpack按指定顺序打包JS/CSS（无需额外工具） #

完全可以通过Webpack实现，核心步骤如下：

1. 创建专属入口文件：在src下新建比如vendor-bundle.js，按你需要的顺序手动导入所有目标文件：

   // 按顺序导入CSS
   import '../assets/vendor/lib1.css';
   import '../assets/vendor-modified/lib2.css';
   
   // 按顺序导入JS
   import '../assets/vendor/libA.js';
   import '../assets/vendor-modified/libB.js';
   

2. 修改vue.config.js配置多入口：

   module.exports = {
     configureWebpack: {
       entry: {
         app: './src/main.js', // 项目原有入口
         vendor: './src/vendor-bundle.js' // 新增的第三方资源入口
       }
     }
   }
   

Webpack会严格按照你导入的顺序，将这些文件打包成vendor.js和vendor.css（Vue CLI已内置mini-css-extract-plugin，会自动分离CSS）。

3. 能否在主构建流程中完成？ #

可以直接整合到主构建流程，无需单独构建。配置好多入口后，执行vue-cli-service build时，Webpack会同时构建主项目入口和新增的vendor入口，生成的文件会一并输出到dist目录，和主构建同步完成。

4. 保留非模块化JS文件的方法 #

针对无export/import的全局变量式脚本，有几种处理方式：

• 用script-loader执行全局代码：先安装script-loader，然后导入时用该 loader 包裹，确保脚本在全局作用域执行，保留原有全局变量：

  import 'script-loader!../assets/vendor/non-module-script.js';
  

• 配置externals排除打包：如果希望脚本仍以单独文件形式引入（不打包进bundle），在vue.config.js中配置：

  module.exports = {
    configureWebpack: {
      externals: {
        jquery: 'jQuery' // 全局变量jQuery不会被打包，需在index.html手动引入jquery.js
      }
    }
  }
  

• 直接用require导入：无需额外配置，直接在入口文件中用require引入，Webpack会将脚本内容直接插入到bundle中，保留原全局变量：

  require('../assets/vendor/non-module-script.js');
  

内容的提问来源于stack exchange，提问作者JohnSmith