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/ -------------中文官網
複製代碼