初识webpack

1.创建package.json

npm init

这是目录中会出现package.json文件了

2.安装webpack

cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin -D

3.修改package.json里scripts

"scripts": {
  "build": "webpack",
  "start": "webpack serve"
},

4.创建所需文件

public
 └──index.html
src
 ├──name.js
 ├──doing.js
 └──index.js
package.json
webpack.config.js

创建webpack.config.js

webpack的核心概念

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
• context: context即是项目打包的路径上下文，如果指定了context,那么entry和output都是相对于上下文路径的，contex必须是一个绝对路径

最简单的webpack配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	mode: 'production',
	devtool:false,
	devServer:{
	    port:8080
	},
	//入口
	entry: {
		
		main: './src/index.js'
	},
	//打包文件的出口及打包文件的命名
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'dist.js'
	},
	//插件
	plugins:[
		new HtmlWebpackPlugin({
			template: './public/index.html'
		})
	]
}