填坑webpack

1.Concepts：

webpack is a module bundler for modern JS applications. Since there are lots of complex JS code and dependencies of files.

2. Entry:
webpack provide a graph of application dependencies, the starting point is known as the entry point, which tells webpack where to start and follows the graph of dependencies to know what to bundle.

Can be specified in webpack.config.js:

  entry: "./app/entry", // string | object | array
  entry: ["./app/entry1", "./app/entry2"],
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },
  // Here the application starts executing
  // and webpack starts bundling

 3. Output

Once you've bundled your assests together, we need to tell webpack where to bundle our application. the "output" property tells webpack how to treat bundled code.

Can be specified in webpack.config.js:

var path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

 Through output.filename and output.path, we're describing to webpack the name of our bundles, and where we want to emit it.

4. Loaders:

Goal is have all the assets in your project to be webpack's concern instead of browser's. This does not mean that we have to bundle all files together.

webpack treats every file(.css, .js, .html, .scss) as a module, but webpack only understand javascript.

Loaders in webpack transform these files into modules, as they are added to your dependency graph.

They have two purpose in your webpack config:

  1) Identify what files should be transformed by a certain loader.(test property)

  2) Tansform that file so that it can be added to the dependency graph(and eventually your bundle).(use property)

Can be specified in webpack.config.js:

var path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

In the above configuration, we defined a rule property for a single module, with required two properties: test and rules, this tells webpack compiler the following:

"Hey webpack compiler, when you come across a path that resolves to a '.js' or '.jsx' file inside of a require()/import statement, use the babel-loader to transform it before you add it to the bundle".

Important: define rules in modules.rules, not in rules.

5. Plugins:

Since Loaders execute per-file, plugins are backbones of webpack. A webpack plugins is a JS object that has an apply property, This apply property is called by the webpack compiler, give access to entire compilication process

 i.e. Customize the webpack build process in a variety of ways.

If we want to use plugins or loaders, install them through npm, and then add instances in "plugins"(an array) properties .

var webpack = require('webpack')
// importing plugins that do not come by default in webpack
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// adding plugins to your configuration
plugins: [
  // build optimization plugins
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^./locale$/, /moment$/),
  // compile time plugins
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server enhancement plugins
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

查看错误信息：

webpack --display-error-details

打包：

webpack --config webpack.config.js