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 中文文档

备注

能写的都写了。。。

posted @ 2020-07-23 10:19  落叶&不随风  阅读(402)  评论(0编辑  收藏  举报