Webpack基本配置步骤

~配置打包的入口出口

webpack4.x版本默认约定：

• 打包入口文件为src文件夹下的index.js文件。
• 打包出口文件为dist文件夹下的main.js文件。

修改入口出口文件，在webpack.config.js中如下新增配置：

const path=require('path);   //导入node.js中处理url的模板

module.exports={
	entry:path.join(__dirname,'./src/index.js'),  //打包的入口文件
	output:{
		path:path,join(__dirname,'./dist'),   //输出文件路径
		filname:'bundle.js'   //输出文件名称
	}
}

注意：__dirname有两个下划线

---

~配置自动打包功能

如果修改或编写了代码，总要使用npm run dev 来重新打包会很麻烦。所以webpack-dev-server支持项目自动打包。下面时配置步骤：

1. 运行npm install webpack-dev-server -D,安装项目自动打包工具。
2. 修改package.json文件中scripts中dev为

"scripts":{
	"dev":"webpack-dev-server"     //自动打包
}

在浏览器中访问http://localhost:8080地址，显示根目录文件夹内容。

• 会启动一个实时打包的http服务器
• webpack-dev-server打包输出文件，默认放在项目根目录中，是虚拟的，看不见的。（Ctrl+c 结束进程； cls 清空屏幕）

---

~配置生成预览页面

用npm run dev 运行项目后，访问http://localhost:8080地址后，还需要点击src才能访问首页。麻烦，所以，可以用html-webpack-plugin插件将index.html首页复制一份到根目录中，直接访问首页。

1. 运行npm install html-webpack-plugin -D ，安装插件。
2. 打开webpack.config.js文件。

//导入生成预览页面的插件
const HtmlWebpackPlugin=require('html-webpack-plugin')

const htmlPlugin=new HtmlWebpackPlugin({
  template:'./src/index.html',    //指定要用到的模板文件
  filename:'index.html'    //指定生成文件名
})

module.exports={
  plugins:[htmlPlugin],    //plugin数组->webpack打包用到的插件
}

生成的文件不会再目录中显示，存在内存中。

---

~修改自动打包相关参数

//- -open 浏览器 打包完成后自动打开页面
//- - host 配置ip地址
//- - port 配置端口

"scripts": {
	"dev": "webpack-dev-server --open chrome --host 127.0.0.1 --port 8088"
},

自动打开Chrome,访问http://localhost:8088端口

---

~webpack简单的打包发布

上线之前需要通过webpack将应用进行整体的打包
在package.json文件scripts中，添加如下配置：

  "scripts": {
  	//用于打包的命令
	"build":"webpack -p",
	//用于开发调试的命令
    "dev": "webpack-dev-server --open chrome --host 127.0.0.1 --port 8080"
	}

在webpack.config文件中将mode：修改为production->发布模式。

module.exports={
	mode:'production',//development->开发者;production->发布模式
}

运行npm run build 进行打包发布

但是，在实际开发过程中，webpack默认只能打包处理.js文件，非,js文件，需要调用loader加载器才可以正常打包。

关于非.js文件的打包发布配置步骤添加链接描述