webpack搭建过程

webpack有五大核心：：：

entry：入口

output：出口

loader：资源转换器

plugin：插件

mode：模式

webpack目前最稳定版本呢是   4.43

然后说一下怎么创建webpack：：：

先创建一个目录   创建一个webpack.json文件

然后在终端安装   npm init -y

在安装webpack-cli：：：

npm install webpack webpack-cli --save-dev

也有简写的： npm i webpack webpack-cli -D

安装完了用 ./node_modules/.bin/webpack -v检测一下是否安装成功

在项目根目录下创建一个src，在里面在创建一个index.js文件

会构建成一个dist目录，并且生成一个main-js文件

src/index.js是默认的入口

dist/main.js是默认的出口

如果手动配置，必须要创建webpack配置文件，来执行

默认webpack配置文件：webpack.config.js

黄色警告如何解决：通过配置mode
如何自动清理打包的垃圾文件：

第一步： npm install --save-dev clean-webpack-plugin

第二步： 在webpack.config.js中引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

第三步：通过plugins实例化

module.exports = {
...
plugins: [
new CleanWebpackPlugin(),

......
};

基于webpack的服务器环境：webpack-dev-server;

npm install webpack-dev-server -D

通过devServer来配置:port,baseContent

devServer: {
port: 9999,
contentBase: path.join(__dirname, 'dist'),
}

如何实现自动构建构的文件自动注入index.html:

安装html-webpack-plugin

npm install html-webpack-plugin

引入：

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

添加到plugins中：

plugins: [
。。。
new HtmlWebpackPlugin({
template: './index.html', //读取模板的入口文件
filename:'index.html' //生成打包后的html文件
}),
]

说明：webpack可以将node服务端的JS代码通过构建直接运行在浏览器上

webpack支持多种模块化规范：AMD,CMD,CommonJS,ES6 modules

webpack默认识别的文件：.js,.json文件格式