Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a js file with webpack?

I was reading this webpack tutorial:

https://webpack.github.io/docs/usage.html

It says it bundles the src files and node_modules. If I want to add another .js file there, how can I do this? This is a thirdpartyjs file that is not part of the source and not part of the node_modules files. This is my current webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './app/app.js'
    ],
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "dist.js",
        sourceMapFilename: "dist.map"
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
    ],
    module: {
        loaders: [{
            loader: 'babel',
            exclude: /node_modules/
        }]
    },
    devServer: {
        inline: true
    },
    node: {
        fs: "empty"
    },
    watch: false
}
like image 475
bier hier Avatar asked May 24 '17 07:05

bier hier


People also ask

How do I include a JavaScript file in webpack?

You can use webpack-inject-plugin to inject any JS code as string into the resulting . js bundle created by webpack. This way you can read the File you want to inject as a string (e.g. fs. readFile in nodejs) and inject it with the plugin.

How do you include a JavaScript file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Where is the webpack config js file?

The webpack configuration file webpack. config. js is the file that contains all the configuration, plugins, loaders, etc. to build the JavaScript part of the NativeScript application. The file is located at the root of the NativeScript application.

How do I make a JavaScript bundle?

Building a Bundler Let's break down the bundling steps from source code to a JavaScript bundle that can run in a browser: Efficiently search for all files. Resolve the dependency graph. Serialize the bundle.


1 Answers

The start point for code is the entry field in config. In your config entry point is the list of files. Webpack gets all, resolve their dependencies and output in one file.

You have two options for adding third party script:

  • add the file path to entry list before app.js
  • require this file from app.js
like image 88
Dmitry Manannikov Avatar answered Oct 08 '22 04:10

Dmitry Manannikov