Angular 5项目中如何通过Webpack导入模板的CSS与JS文件

我之前在Angular 5项目里整合第三方JS文件时也踩过不少坑，既然CSS已经搞定了，给你几个实用的方案来处理JS文件，你可以根据自己的webpack配置情况选：

方案1：通过Webpack插件复制JS到输出目录并全局引入 #

如果你的JS文件是非模块化的全局脚本（比如一些老的UI插件），最稳妥的方式是用CopyWebpackPlugin把文件复制到打包后的静态资源目录，然后在index.html里手动引入。

首先安装插件：

npm install copy-webpack-plugin --save-dev

然后在你的webpack.config.json里添加配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    // 复制JS文件到assets/js目录
    new CopyWebpackPlugin([
      { 
        from: './path/to/your/js/files/**/*.js', // 你的JS文件路径
        to: './assets/js/', 
        flatten: true // 只复制文件，不保留目录结构
      }
    ])
  ]
};

接着在src/index.html里添加脚本标签：

<script src="assets/js/your-script.js"></script>

方案2：模块化导入到组件/模块中 #

如果你的JS文件支持ES6模块或CommonJS规范，可以直接在需要用到的组件或模块里导入：

// 在组件.ts文件顶部导入
import '../../path/to/your/js/file.js';

@Component({
  // 组件配置
})
export class YourComponent {
  // 组件逻辑
}

如果是像jQuery这类需要全局可用的库，还可以用Webpack的ProvidePlugin自动注入，不用每次都手动import：

首先安装依赖（比如jQuery）：

npm install jquery --save

然后在webpack配置里添加插件：

const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery' // 全局暴露$和jQuery变量
    })
  ]
};

这样在组件里就能直接用$了，不需要额外import。

方案3：通过Angular CLI的scripts配置（如果用CLI的话） #

如果你是用Angular CLI搭建的项目（Angular 5对应CLI 1.x版本），可以直接修改.angular-cli.json里的scripts数组，CLI会自动把这些JS打包到vendor文件中：

{
  "apps": [
    {
      // 其他配置...
      "scripts": [
        // 可以是本地文件路径，也可以是node_modules里的文件
        "../node_modules/jquery/dist/jquery.min.js",
        "./src/assets/js/custom-script.js"
      ]
    }
  ]
}

注意事项 #

• 如果JS文件有依赖关系（比如插件依赖jQuery），一定要确保依赖的JS先加载（比如在scripts数组里把jQuery放在插件前面）。
• 如果你是自定义Webpack配置而非用CLI默认配置，要注意Angular 5的Webpack配置有特定的结构，尽量不要破坏原有配置的逻辑，建议通过扩展的方式添加插件和规则。

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