webpack基础命令

npm init mulin    创建项目

npm install webpack-cli --save-dev   安装webpack脚手架

npm install webpack --save   安装webpack

npm install file-loader -D  用于打包文件（图片，文档等） loader为文件处理方案

npm install url-loader --save-dev  将图片转换成Base64编码

npm install style-loader css-loader -D   

css-loader会分析出css文件之间的关系(例如在css文件里import别的css文件),合并成一个css，style-loader把合并出的css再挂载到head里

npm install sass-loader node-sass --save-dev  处理sass文件

npm i -D postcss-loader  为css3自动添加各厂商前缀

npm install autoprefixer -D 为css3自动添加各厂商前缀

npm install --save-dev html-plugin-plugin  处理html文件的插件

npm install clean-webpack-plugin -D  每次打包项目时，将上一次打包目录清空

npm install webpack-dev-server -D  热更新

npm install --save-dev babel-loader @babel/core      使用ES6语法

npm install @babel/preset-env --save-dev  将ES6语法翻译成ES5

npm install --save @babel/polyfill  弥补低版本浏览器不存在的内容，在入口JS里  import "@babel/polyfill"

 

如果是写库时，安装以下3个库，避免polyfill会污染全局环境

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

npm install --save @babel/runtime-corejs2

 

npm install --save-dev @babel/preset-react    解析react语法

npm install webpack-merge -D   将公用配置文件与开发配置文件或上线配置文件合并

npm install lodash --save    提供了字符串拼装等很多函数功能

npm install babel-plugin-dynamic-import-webpack --save--dev  解析import函数,转义异步语法

npm install --save-dev @babel/plugin-syntax-dynamic-import  动态引入

npm install --save-dev mini-css-extract-plugin  对CSS文件进行代码分割

npm install optimize-css-assets-webpack-plugin -D  对CSS代码进行压缩

npm install imports-loader --save-dev  可以让全模块的this指向window 

 

 

npx webpack index.js  使用webpack翻译js

npm uninstall webpack webpack-cli -g   卸载webpack

npx webpack -v  查看当前项目下webpack版本

npx webpack   打包webpack

npx webpack --config webpackconfig.js  修改webpack默认配置文件

 

package.json里

"scripts": {

     "watch": ''webpack --watch"

}

watch 监听打包文件修改变化

"scripts": {

     "start": ''webpack-dev-server"

}

启动热更新