本文共 2824 字，大约阅读时间需要 9 分钟。

本机环境系统：windows 7 64位系统node：		8.12.0npm：		6.4.1webpack：	4.29.5webpack-cli：3.2.3一、安装1、安装nodejs下载地址（下LTS版）: https://nodejs.org/zh-cn/安装好后, 如果安装过Git, 那么直接在桌面Git Bash Here进入bash窗口, 否则需要进入CMD命令行窗口执行如下命令查看安装版本$ node -v$ npm -v 2、安装 webpack 和 webpack-cli配置npm指向国内的npm仓库镜像(因为直接从国内下载npm包要快很多)$ npm config set registry https://registry.npm.taobao.org$ npm install -g webpack$ npm install -g webpack-cli注意：一定要耐心等待install, 因为npm下载有点慢npm默认把包安装在这个目录下 C:\Users\你的用户名\AppData\Roaming\npm因此需要把这个目录添加进环境变量，然后重新打开bash窗口，或者CMD窗口执行如下命令查看版本信息$ webpack -v$ webpack-cli -v二、使用1、hello world$ mkdir myweb$ cd myweb$ mkdir src注意：必须创建src目录，且要打包的js源文件也必须在这个目录下$ vi src/index.jsindex.js文件的内容如下：document.write("hello world !");document.write("
");document.write(require("./login.js"));$ vi src/login.jslogin.js文件的内容如下：module.exports = "此内容来自login.js文件！";$ webpack如果不出意外，myweb目录里会生成一个默认的dist目录，dist目录下有一个webpack打包好的main.js文件$ vi index.htmlindex.html文件的内容如下：			
   		
   									现在我们可以双击index.html文件，在浏览器里可以看到效果啦！2、自定义配置$ vi webpack.config.js内容如下：module.exports = {	mode: 'development', 			// 模式：development 或 production	entry: './static/js/index.js',	// 入口文件	output: {		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径		filename: 'hoyosnfshog.js'	// 出口文件名	}}$ mkdir -p static/js$ mv src/* static/js/$ rm -fr src$ rm -fr dist$ webpack修改index.html文件中 src="dist/main.js" 为 src="mydist/hoyosnfshog.js"，然后刷新浏览器查看效果3、和css文件一起打包先安装 style-loader 和 css-loader$ npm install style-loader$ npm install css-loaderwebpack.config.js 文件里添加module属性，内容如下：module.exports = {	mode: 'development', 			// 模式：development 或 production	entry: './static/js/index.js',	// 入口文件	output: {		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径		filename: 'hoyosnfshog.js'	// 出口文件名	},	module: {	    rules: [	        { test: /\.css$/, loader: "style-loader!css-loader" }	    ]	}}$ vi static/css/common.css内容如下：body {	background: yellow}$ vi static/js/index.js内容如下：require('../css/common.css');document.write("hello world !");document.write("
");document.write(require("./login.js"));$ webpack现在刷新浏览器，可以看到网页背景色变成黄色啦！4、使用插件（可不学）为 webpack.config.js 文件增加以下内容：var webpack = require('webpack');module.exports = {	mode: 'development', 			// 模式：development 或 production	entry: './static/js/index.js',	// 入口文件	output: {		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径		filename: 'hoyosnfshog.js'	// 出口文件名	},	module: {	    rules: [	        { test: /\.css$/, loader: "style-loader!css-loader"}	    ]	},	plugins:[		new webpack.BannerPlugin('被你发现啦！找工作可以发送简历到652xxxx74@qq.com') // 用于在打包后的文件头部输出一些注释信息	]}$ npm install webpack$ webpack注意：要使用webpack自带的插件，必须在当前项目里局部安装一次webpack，重新webpack打包后，可以打开 mydist/hoyosnfshog.js 文件，看看是不是按照要求打上了注释信息！5、webpack命令其他参数$ webpack --progress --colors --watch--progress参数表示显示编译进度--colors 参数表示编译信息带颜色--watch  参数表示监听源文件，一但发现源文件被修改，立马重新编译，且为变更的文件不会重新去编译，提升编译效率

转载地址：http://hwrai.baihongyu.com/