how to include external javascript or css in webpack angular2

0
votes

I was starting an angular 2 project with webpack.I am using angular2-webpack-starter https://github.com/AngularClass/angular2-webpack-starter.

I want to include external javascripts and css in my app.I have checked some blogs but I found them confusing.

1
javascriptangularjsangularwebpackes6-module-loader
What do you mean by external? What have you tried so far - Fabio Antunes
I mean any javascript file like jquery,chartjs etc - tsadkan yitbarek

1 Answers

1
votes

I'm guessing by external css and js you mean downloaded files that you have in your project somewhere. If you've used the webpack starter seed as is you most likely have an assets folder inside src/ thats already set up for you to place external css and js files in and list them in the index.html file.

If not, either redownload the seed if you want to start again, or you can create this folder under src, and include the files in the index.html file, something like

<script src="/assets/css/lib.min.css" />
<script src="/assets/js/lib.min.js" />

If you are bundling using webpack then you will also need to tell webpack to move the assets folder to the create location. In webpack.config.js you can do the following:

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

module.exports = {
    ...
    plugins: [
        new CopyWebpackPlugin([
            { from: 'src/assets', to 'assets' }
        ]),
        ...
}