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  extract-text-webpack-plugin@next------提取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/ -------------中文官网
复制代码