Bundle and load files to specified location in webpack (detailed tutorial)

Below I will share with you a method of webpack packaging and loading files to a specified location. It has a good reference value and I hope it will be helpful to everyone.

The best thing about using webpack for packaging is that you can directly require files, but this

also brings a problem, that is, all the files are integrated together, then this package too big.

Based on this: Let’s learn about the packaging of webpack (mainly how to package the content modules we need separately,

And store it according to the storage path we set)

First, in the webpack.config.js file

entry entry function output indicates which ones need to be packaged separately Into a js package:

entry: {
  main: path.resolve(__dirname,'src/index.js'),
  jq: ['jquery'],
  react: ['react'],
  redom: ['react-dom']
},
output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
plugin: [
  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

Configure as above, so that when the file is generated, the three js js jq.js, vendors.js, and redom.js will be added to the dist directory.

The above solves the problem of us packaging multiple packages;

So if we want to store the packaged js in a specified location, how do we do it? Don’t worry, let’s follow The specific implementation of

is as follows (in fact, the difference is mainly in the entry function):

entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },

As shown above, the four js will be stored in the four files under the dist we formulated. folder. (Note: At this time, you no longer need to use the webpack.optimize.CommonsChunkPlugin plug-in)

Finally, paste the left and right webpack.config.js codes:

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },
 output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
 module: {
  loaders: [
   {
    test: /\.scss$/,
    loader: 'style!css!sass'
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
    loader: 'babel'
   },
   {
    test: /\.(png|jpg|gif)$/,
    loader: 'url?limit=40000'
   }
  ]
 },
 babel: {
  presets: ['es2015','stage-0','react'],
  plugins: ['transform-runtime',["antd",{"style": "css"}]]
 },
 resolve: ['js','jsx','css'],
 plugins:[
  new webpack.ProvidePlugin({
   $:"jquery",
   jQuery:"jquery",
   "window.jQuery":"jquery"
  })
 // new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
 // new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
 // new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
 ]
};

above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use eventBus in vue to achieve communication between components at the same level

How to implement automatic communication in vue2.0 Define the pie chart (Echarts) component

How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

The above is the detailed content of Bundle and load files to specified location in webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!