Webpack management.but booklet (2) | free learning

This section focuses on detailed WebPack configuration information, since “WebPack Senior Configuration Engineer” is the target of every front-end ER

Start with the core concept of WebPack

• Entry:entryIs the entry to the configuration module, which can be abstracted as input. The first step in the Webpack execution of the build will start from the entry and recursively resolve all the modules that the entry depends on.
• The output:outputConfigure how to output the final desired code.
• Mode: Selectdevelopment.production 或 noneOne of them, to setmodeParameter to enable optimization built into WebPack for the appropriate environment. The default value isproduction
• Loader: Webpack can only understand JavaScript and JSON files, which are available in webPack out of the box. Loader enables Webpack to handle other types of files.
• Plugin: Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Including: package optimization, resource management, injection of environment variables.

entry

The entry type can be a string, array, or object

Webpack assigns a name to each Chunk. The name of the Chunk depends on the configuration of Entry:

• ifentryIs astring 或 array, only one Chunk is generated, and the name of Chunk ismain;
• ifentryIs aobject, there may be multiple chunks, in which case the name of Chunk isobjectThe name of a key in a key-value pair.

output

Output is an object containing the output file name, path, and other information, as shown below

output: {
    filename: '[name].js'.path: path.resolve(__dirname, dist),
    publicPath: 'https://cdn.abcd.com/assets/'.// libraryTarget: var,
    // library: 'test'
}
Copy the code

• Filename: The output filename, [name] is a placeholder that can be replaced at compile time with the built-in name variable, along with id (unique identifier, starting from 0), hash (unique identifier hash), chunkhash (hash value of chunk content), Using hashes, you can specify a length such as [hash:8].js. The default length is 20

• Path: indicates the local directory where the configuration output file is stored. The path must be a string absolute path. The absolute path is usually obtained from the Node.js path module

• PublicPath: Complex projects may have built resources that need to be loaded asynchronously. Loading these asynchronous resources requires corresponding urls. PublicPath is used to set these urls, as the configuration above is packaged into HTML

  <script src="https://cdn.abcd.com/assets/main.js"></script>
  Copy the code

• LibraryTarget and Library: These two configurations are needed when building a library that can be imported by other modules. How the libraryTarget configuration is exported, and the name of the library configuration exported. The default export is var, and the output is a self-executing function, among other things

  • Commonjs (exports[‘libraryName’], require(‘dep’)[‘libraryName’]),
  • Module. Exports, libraryTarget = commonJs2commonjs2There is no point in configuring library.
  • The library written by this will passthisIs assigned to passlibrarySpecified name),
  • Window (The library written will passwindowIs assigned to passlibrarySpecified name),
  • Global (the library written will passglobalIs assigned to passlibrarySpecified name)

• LibraryExport: Configates which submodules of the exported module need to be exported. This makes sense only if the libraryTarget is set to CommonJS or Commonjs2

loader

Webpack processes the loader that the module mainly relies on, using loader to parse different files, and finally unified output

module: {
  rules: [{test: /\.less$/.// Regex matches
      use: ['style-loader'.'css-loader'].// The loader to use
      exclude: path.resolve(__dirname, 'node_modules'), // Directory not included
      / / include: path. Join (__dirname, '/ SRC), / / include directory}, {test: /\.less$/,
      loader: 'less-loader'.exclude: path.resolve(__dirname, 'node_modules'),
      enforce: 'pre'.// When there are multiple rules, use enfore to control the execution sequence, pre > Inline > Normal > Post}},Copy the code

• Relues: The configuration of loader is stored in rules under module. Rules can be an array, an object, or a string. Rules are used to parse different modules using different matching rules (test, incluede, and exclude)

  After the file is matched, use loader or use to declare the loader to be used. When multiple loaders need to be processed, use the use array, which can be a string array (loaderName? Pass arguments to loader as param’, deprecated). If there are too many arguments, you can also use objects to describe the loader

  use: [
  {
    loader:'babel-loader'.options: {cacheDirectory:true,}},]/ / equivalent to the
  use: ['babel-loader? cacheDirectory']
  Copy the code

• NoParse: Using noParse tells WebPack to ignore libraries that don’t need parsing, such as jquery, because it takes time and doesn’t make sense for WebPack to parse these files. Ignoring parsing improves performance

  module: {
      noParse: /jquery/
  }
  Copy the code

• Parser: The difference between Parser and noParse is that noParse only keeps files from being parsed, whereas Parser is accurate to syntax

  module: {
    rules: [{test: /\.js$/,
        use: ['babel-loader'].parser: {
        amd: false./ / disable AMD
        commonjs: false./ / disable CommonJS]}}},Copy the code

plugin

Plug-ins are designed to solve other things that loader cannot implement. Since plug-ins can carry parameters/options, a new instance must be passed to the plugins property in the WebPack configuration.

Almost everything Webpack can’t do directly can be solved by finding open source plugins in the community

devServer

DevServer can dramatically change development efficiency

• Hot: The module hot replacement function. The default behavior is to automatically refresh the entire page to achieve real-time preview when the source code is updated. After the module hot replacement function is enabled, the real-time preview is achieved by replacing the old module with a new module without refreshing the entire page.

• ContentBase: Configures the file root of the DevServer HTTP server, which by default is the current execution directory, usually the project root.

• Headers: You can inject some HTTP response headers into an HTTP response.

• Host: the address that DevServer listens on. The default value is 127.0.0.1, or 0.0.0.0 if you want other machines on the LAN to access it

• Port: indicates the port number. Port 8080 is used by default.

• AllowHosts: a whitelisted list that returns only HTTP requested hosts in the list.

• HTTPS: If HTTPS is enabled, an HTTPS certificate is automatically generated for you. It can also be configured manually

  devServer:{
    https: {
      key: fs.readFileSync('path/to/server.key'),
      cert: fs.readFileSync('path/to/server.crt'),
      ca: fs.readFileSync('path/to/ca.pem')}}Copy the code

• Open: automatically opens the browser after compiling.

• OpenPage: Sets the URL for open.

• Compress: Indicates whether gzip compression is enabled.

• Proxy: Can forward a specific URL to another server

  proxy: {
    '/api': {
      target: 'http://localhost:3000/api'.// If you want to delegate WebSockets
      ws: true.// Change the origin of the host header to the destination URL
      changeOrigin: true.secure: false.pathRewrite: {[`^/api`] :' '}}}When / / access/API/users, will be forwarded to http://localhost:3000/api/users
  Copy the code

resolve

Can you set how the module is parsed

• Alias: alias. You can set an alias for the path to simplify writing. For example,

  resolve:{
    alias: {@ :'./src' // SRC /views can be accessed with @/views}}Copy the code

• Extensions: WebPack will look for files in the order configured if the import statement does not have file suffixes

  resolve: {
      extensions: ['.js'.'.json']
      // When importing import './foo', foo.js is first looked for, and foo.json is then looked for if not found
  }
  Copy the code

• Modules: Tells WebPack which directories to look for dependencies in

  resolve: {
      modules: ['./src/components'.'node_modules']
      // import require('foo')./ SRC /components' first, then node_modules
  }
  Copy the code

• DescriptionFiles: configures the name of the file that describes the third party module. Default is package.json file.

• EnforceExtension: configures whether the imported file must be enforceExtension. The default is false. If set to true, import foo from ‘./foo.js’

• EnforceModuleExtension: used with enforceExtension, some third-party dependency packages do not carry file suffixes, and enforceModuleExtension: False is set to enforceExtension to be compatible with third-party modules

other

module.export = {
  devtool: 'source-map'.// Controls whether source-map is generated
  watch: true.// Whether to enable file listening
  watchOptions: {
    // A file or folder that is not listened on and supports regular matching
    // Empty by default
    ignored: /node_modules/.// Wait 300ms to execute the action after listening to the change to prevent the file update too fast and recompile too frequently
    // the default is 300ms
    aggregateTimeout: 300.// Query every 1000 milliseconds by default
    poll: 1000},externals: {
    // Replace jquery in the import statement with the global jquery variable in the runtime
    jquery: 'jQuery'},resolveLoader: {// Go to the directory to find loader
    modules: ['node_modules'].// The suffix of the entry file
    extensions: ['.js'.'.json'].// A field specifying the location of the entry file
    mainFields: ['loader'.'main']}}Copy the code

Other Configuration types

Webpack.config. js can export an object, which is the most common form, and a function that takes two arguments, the environment variable env and the command argument argv, in the following form

const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = function (env = {}, argv) {
  const plugins = [];

  const isProduction = env['production'];

  // Compress in production environment
  if (isProduction) {
    plugins.push(
      new UglifyJsPlugin()
    )
  }

  return {
    plugins: plugins,
    // The Source Map is not printed in the build environment
    devtool: isProduction ? undefined : 'source-map'}; }Copy the code

You can also export a Promise when an Object describing the configuration cannot be returned synchronously

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve({
        // ...})},5000)})}Copy the code

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event