webpack

在项目中配置webpack
1.npm install webpack webpack-cli -D 安装webpack相关包
2.在项目根目录下创建webpack配置文件,webpack.config.js

module.exports = {
    mode:"development"  //mode用来指定构建模式 development production
}

3.在package.jason配置文件中的scropts节点下,新增dev脚本

"scripts":{
    "dev":"webpack" //script节点下的脚本,通过npm run 执行
}

4.配置打包文件的入口与出口

const path = require("path");
module.exports = {
    mode:"development"  //mode用来指定构建模式 development production
    entry:path.join(__dirname,"./src/index.js");//需打包文件路径,src是默认的一种入口路径
    output:{
		path:path.join(__dirname,"./dist")//打包后文件的输出目录,dist为默认的输出目录
		filename:"packtest.js"//输出的文件名
	}
}

注意：

1. webpack-dev-server 会启动一个实时打包的 http 服务器
2. webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

5.配置自动打包
5.1 npm install webpack-dev-server –D 安装支持项目自动打包的工具
5.2 修改 package.json -> scripts 中的 dev 命令

"scripts": {   
	"dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行 
}

5.3 将 src -> index.html 中，script 脚本的引用路径，修改为 “packtest.js”
5.4 运行 npm run dev 命令，重新进行打包
浏览器中访问 http://localhost:8080 地址，查看自动打包效果
5.5 配置自动打包相关的参数
package.json中的配置
--open 打包完成后自动打开浏览器页面
--host 配置 IP 地址
--port 配置端口

 "scripts": {
 	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 }

6.生成预览页面
1.npm install html-webpack-plugin –D ，安装生成预览页面的插件
4. 修改 webpack.config.js 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
	  template: './src/index.html', // 指定要用到的模板文件
	  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3.修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {
	 plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}