webpack的详细配置与使用

1.版本说明

webpack版本： “webpack”: “^3.6.0”

2.例子：

该实例代码可参见github地址：https://github.com/suhuashan/webpack3.6.0-

//main.js
import Cal from './cal.js';

var container = document.getElementById("app");
container.innerHTML = Cal;

//cal.js
export default "我是计算器";

3.接下来，分为两种情况说明：

（1）不配置webpack.config.js文件

有两种运行webpack打包文件的方案：
第一种：
本地安装webpack，然后运行命令。

webpack ./main.js             //这里的main.js是入口文件

然后会在项目根目录下生成dist目录，里面有一个main,js文件，然后再将该文件引入index.html，便能看到效果。
第二种：
本地没有安装webpack的情况，直接使用webpack会报错，于是有了另一种解决方案。
配置package.json文件，然后运行命令。
在package.json文件找到script配置项：（这里的main.js是入口文件，build.js是出口文件）

  "scripts": {
    "dev": "webpack ./main.js ./build.js"
  }

运行命令：

npm run dev

然后会在项目根目录下生成build.js文件，后再将该文件引入index.html，便能看到效果。

（2）配置webpack.config.js文件

为什么这里需要配置webpack.config.js文件呢？
因为当执行webpack指令越复杂的时候，用起来就非常不方便，不符合自动化构建项目的理念。默认的配置文件是webpack.config.js，如果要修改配置文件的名字的话，需要在package.json文件配置script这一配置项。

webpack.config.js文件

var path  = require('path');

const HtmlWebpackPlugin  = require('html-webpack-plugin')
// webpack ./main.js  ./build.js
module.exports = {
	// 入口
	entry:{
		// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
		"main":'./src/main.js'
	},
	output:{
		path:path.resolve('./dist'),//相对转绝对
		filename:'build.js'
	},
	watch:true,//文件监视改动 自动产出build.js
	// 声明模块
	// 包含各个loader
	module:{
		loaders:[
			{
				// /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
				// 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
				// webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
				//这里需要安装的模块：css-loader、style-loader
				test:/\.css$/,
				loader:'style-loader!css-loader'
			},
			{
				//处理各种图片格式
				//这里需要安装的模块：url-loader、file-loader
				test:/\.(jpg|png|jpeg|gif|svg)$/,
				loader:'url-loader?limit = 60000'
			},
			{
				//处理less文件
				//这里需要安装的模块是less、less-loader
				test:/\.less$/,
				loader:'style-loader!css-loader!less-loader'
			},
			{
				//处理ES6,ES7代码
				//这里需要的模块：babel-core、babel-loader、babel-plugin-transform-runtime、babel-preset-env
				test:/\.js$/,
				loader:'babel-loader',
				exclude:/node_modules/,
				options:{
					presets: ['env'],  //处理关键字
					plugins: ['transform-runtime'] //处理函数

				}
			}
		]
	},
	plugins:[
		// 插件的的执行顺序与元素由关
		new HtmlWebpackPlugin({
			template:'./src/index.html',//参照物
		})

	]
}

当然，平时在vue-cli脚手架经常看到webpack.prod.config.js文件和webpack.dev.config.js文件。这是因为webpack在生产环境和开发环境使用到的webpack指令不太一样。于是分别写成两份文件，然后在package.json文件进行配置即可。
package.json文件

  "scripts": {
    "dev": "webpack  --config ./webpack.dev.config.js",
    "prod": "webpack  --config ./webpack.prod.config.js"
  }

然后只需要在对应环境执行对应的命令即可。

npm run dev(开发环境）
npm run prod(生产环境）

3.配置webpack-dev-server

因为前面使用到的webpack的版本是3.6.0，所以这里的webpac-dev-server的版本是2.9.0。
webpack-dev-server是启动本地服务器，利用热更新等功能，目的是便于开发调试。

webpack-dev-server

• open 自动打开浏览器
• hot 热替换，不刷新浏览器的情况下自动更新css样式
• inline 自动刷新
• port 9999 指定端口号

最后，修改一下package.json文件的script项，修改为：

  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
    "prod": "webpack --config ./webpack.prod.config.js"
  }