webpack命令

webpack

安裝

npm init -y

npm install webpack webpack-cli --save-dev
複製代碼

查看webpack的版本號

node_modules\.bin\webpack -v
複製代碼

查看webpack的幫助

node_modules\.bin\webpack -h
複製代碼

--mode 設置開發環境仍是生產環境

--entry 設置打包入口（我要將那個文件打包）

--progress 在打包過程當中出現百分比進度

--output 設置打包出口（打包生成的文件）

--watch 監聽文件

命令行打包

node_modules\.bin\webpack "./src/main.js" --output="./dist/main.js"
複製代碼

在package.json中配置scripts腳本

html-webpack-plugin

用來生成html文件的，會默認將壓縮的js文件用script引入到頁面

template: 生成html用的模板 filename: 生成的html的名字 inject: script標籤放置的位置（head|body）

loader

處理css

style-loader css-loader postcss-loader 須要添加配置文件postcss.config.js autoprefixer

處理less

style-loader css-loader postcss-loader 須要添加配置文件postcss.config.js autoprefixer less-loader 依賴 less

處理圖片文件 png，jpg，jpeg，gif

url-loader / file-loader { loader: "url-loader", opstions: { limit: 8192 } }

處理es6

babel-loader

babel-preset-es2015 babel-preset-stage-2

webpack rules

include 規則處理的文件範圍 exclude 排除範圍

webpack-dev-server