webpack3从入门到放肆(附demo)

最简单的demo

Github地址

npm i webpack --save-dev

添加入口与出口配置

Github地址

热更新与服务

Github地址

npm i webpack-dev-server --save-dev

打包CSS文件

Github地址

npm i style-loader css-loader postcss-loader less-loader --save-dev

PS: 在入口文件中导入所编写的less,css,sass

JS代码压缩

Github地址

打包HTML文件

Github地址

npm i html-webpack-plugin --save-dev

CSS中引入图片

Github地址

npm i url-loader file-loader --save-dev

PS: 在入口文件中导入所编写的less,css,sass

CSS分离与publicPath的使用

Github地址

npm i extract-text-webpack-plugin --save-dev

HTML中的图片打包

Github地址

npm i html-withimg-loader --save-dev

项目打包后如何进行调试

Github地址

使用babel开发下一代javascript

Github地址

npm i babel-core babel-loader babel-preset-env babel-polyfill --save-dev

PS: 要在入口文件中导入 babel-polyill 来引入ES6对象以保证在IE中可以正常运行

模块化webpack

Github地址

使用putifycss除去无用CSS

Github地址

npm i purifycss-webpack purify-css --save-dev