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作为配置文件
- 将执行命令添加在package.json文件下的scripts: (推荐)
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
$ npm run dev
$ npm run build
- 在命令行执行:(需要全局安装)
$ webpack [--mode production] [--config webpack.config.js]
- 使用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值,可以设置多个入口文件)
参考
备注
能写的都写了。。。
原博客链接:https://www.cnblogs.com/xpengp/