webpack的使用方法

首先全局安装

cnpm i webpack-cli -g
cnpm i webpack -g

然后

webpack -v 查看版本号

建立一个xm

xm  / src文件夹
src / index.js文件（默认入口文件）
dist / main.js文件（自动生成 默认出口文件 webpack的时候打包生成）

---

在项目根目录cmd

npm i webpack -D
npm i webpack-cli -D

webpack  --mode=development   ----------------不压缩代码
webpack  --mode=production  ------------------压缩代码

webpack.config.js  ---------------------------建立一个文件 设置mode

webpack -w  ----------------------------------实时监控文件的变化  不用重新打包

loader ---------------------------------------解析js以外的文件文件
npm i css-loader  style-loader  -D -----------解析css样式文件

plugin  --------------------------------------插件
npm i html-webpack-plugin  -D ----------------能重新生成html文件

npm i url-loader  file-loader --save ---------处理图片的

npm i html-withimg-loader  --save  -----------在html里的图片用这个打包

npm i --save-dev  [email protected]提取css的插件

npm i webpack-dev-server -g  -----------------服务器 全局安装
npm i webpack-dev-server  --------------------本地安装

webpack的vue脚手架

npm i vue -save
npm i vue-loader -D  -------------------------专门解析vue的组件

npm i vue --save -----------------------------下载vue

npm i vue-template-compiler --save ------------模板编辑器 

webpack的react脚手架

babel-loader  ---------------------------------配置
npm i  @babel/core  @babel/preset-env  babel-loader

根目录下建babelrc文件
.babelrc  ------------------------------------文件

npm i react react-dom @babel/preset-react -----装react脚手架

demo实例

1.//-出口
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
//-入口
entry: './src/index.js',
mode:'development',
//-出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js-----------------------------环境里输入webpack自动生成budle文件  打包成功  在html里路径改这个
},
2.//loader的使用
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
//---插入图片
{
test:/\.jpg$/,
loader:'url-loader',
options:{
limit:10000,--------------------比这个数小就是base64编码，比这个数大，就单独打包成文件
name:'img/[name].[ext]'-------------------打包后的名字和路径
}
},
//--图片打包
{
test: /\.(htm|html)$/i,
loader: 'html-withimg-loader'
}
]
},
3.//插件 作用就是index。在dist里面自动申城一个html文件内容一样
plugins: [
new HtmlWebpackPlugin({template: './index.html'})-----------指当前目录下的  会重新生成一个相同的文件
],
}

https://www.npmjs.com/ ---------------- npm官网最新版本的发布信息
npm uninstall webpack -g --------------卸载
https://www.webpackjs.com/ -------------中文官网