webpack 学习笔记

1、先初始化

npm init -y

2、打包

webpack 源目标文件 目标文件
eg:webpack    .\src\main.js    .\dist\bundle.js

3、打包的第二种方式

只需要在命令行中输入webpack，
但是需要创建webpack.config.js文件在项目的根目录下；

//webpack基于node进行构建的
const path = require('path')//导入模块
module.exports = {
	 entry: path.join(__dirname,"./src/main.js"),//入口,表示要是用那个文件	
	 output: {
	    path: path.resolve(__dirname, 'dist'),//输出目录
	    filename: 'bundle.js'//文件名称
	  }
	}

4、项目的热部署

当项目在不断的修改时，得重新打包编译，过于麻烦。
需要在package.json中加入相应的配置eg:

  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

其中的含义：

• - -open代表打开浏览器
• - -port 3000 设置端口
• - -contentBase src 打开src下面的文件
• - -hot每次保存不重新编译成文件

然后需要安装 webpack-dev-server

cnpm i  webpack-dev-server -D
cnpm i webpack -D

5、安装html-webpack-plugin

当使用html-webpack-plugin之后，我们在页面中不需要手动处理bundle.js的引用路径，
因为这个这个插件已经帮我们自动创建了一个合适的路径。

cnpm i html-webpack-plugin -D

5、运行项目

npm run dev