How to operate webpack to process files

This time I will show you how to operate webpackprocess files, what are the precautions for operating webpack to process files, the following is a practical case, let's take a look.

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

also brings a problem, that is, all the files are integrated together , then this bag is 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 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')
 ]
};

Believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How webpack dynamically introduces files

Package files using CDN’s react webpack

How to make a circular progress bar in WeChat applet

The above is the detailed content of How to operate webpack to process files. For more information, please follow other related articles on the PHP Chinese website!