zoukankan      html  css  js  c++  java
  • webpack安装、环境搭建和基本配置

    安装

    $ npm install -D webpack
    $ npm install -D webpack-cli
    # or use yarn
    $ yarn add -D webpack
    
    • 如果需要在命令行运行,还需要全局安装

    配置文件

    • 默认使用当前目录下的配置文件 webpack.config.js
    • 最基本的入口和输出配置是必须的
    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };
    

    执行

    主要参数

    • 指定运行模式mode,当然也可以在配置文件中指定,参数 node、development、production
    • 指定配置文件config,默认使用当前目录下的 webpack.config.js作为配置文件
    1. 将执行命令添加在package.json文件下的scripts: (推荐)
      "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      },
    
    $ npm run dev
    $ npm run build
    
    1. 在命令行执行:(需要全局安装)
    $ webpack [--mode production] [--config webpack.config.js]
    
    1. 使用node.js执行
    const webpack = require('webpack'); //运行时(runtime)访问 webpack
    const configuration = require('./webpack.config.js');
    
    let compiler = webpack(configuration);
    
    compiler.run(function(err, stats) {
        err ? console.error(err) : console.log(stats);
    });
    

    打印信息

    • 直接使用官方例子吧 0.0
    Hash: dabab1bac2b940c1462b
    Version: webpack 4.0.1
    Time: 323ms
    Built at: 2018-2-26 22:50:25
        Asset      Size  Chunks             Chunk Names
    bundle.js  69.6 KiB       0  [emitted]  main
    Entrypoint main = bundle.js
       [1] (webpack)/buildin/module.js 519 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] ./src/index.js 256 bytes {0} [built]
        + 1 hidden module
    
    WARNING in configuration(配置警告)
    // 这里的警告,是指没有设置打包模式 设置方式看上边执行
    The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production',来启用环境默认值。)
    
    • Hash: 表示当前打包的Hash值,以区分每次打包,所以每次打包都会生成不同的Hash值
    • Version: 当前使用的webpack版本
    • Time: 本次打包花费时间
    • Built at:本次打包时刻
    • Asset: 打包生成的文件名
    • Size: 打包生成的文件大小
    • Chunks: 当前文件的chunk标识,用于区分不同的chunk (默认使用递增的chunkId标识,当然可以通过设置或者插件进行修改,对于chunk缓存优化有很大作用 参考其它文章)
    • [emitted] 表示生成
    • [immutable] 使用[contenthash]命名时出现 只要内容不变,生成的文件名(contenthash)就不会变
    • Chunk Names: 当前所属的chunk名称 (不同的chunk块,由不同的方式设置chunkName 参考其它文章)

    其他说明

    bundls.js: 是在output.filename中设置的
    main: 是在entry中设置,(如果设置为字符串,则默认为main. 如果设置为对象,则使用key值,可以设置多个入口文件)

    参考

    webpack4 中文文档

    备注

    能写的都写了。。。

  • 相关阅读:
    hlgoj 1766 Cubing
    Reverse Linked List
    String to Integer
    Bitwise AND of Numbers Range
    Best Time to Buy and Sell Stock III
    First Missing Positive
    Permutation Sequence
    Next Permutation
    Gray Code
    Number of Islands
  • 原文地址:https://www.cnblogs.com/xpengp/p/13364546.html
Copyright © 2011-2022 走看看