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 排除范围