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文件格式