1.安装webpack所需依赖
npm i webpack webpack-cli webpack-dev-server --save-dev
2.安装babel7,因为目前主要是用ES6来编写代码,所以需要转译
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm i @babel/polyfill @babel/runtime --save
3.新建.babelrc来配置babel插件
{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime"] }
4.安装自动生成html依赖
npm i html-webpack-plugin html-loader clean-webpack-plugin --save-dev
5.安装css/字体图表处理依赖
npm i css-loader style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev
6.为不同内核的浏览器加上CSS前缀
npm install postcss-loader autoprefixer --save-dev
postcss.config.js内容 module.exports = { plugins: [require('autoprefixer')]}
7.图片及字体处理
npm i url-loader file-loader image-webpack-loader --save-dev
8.合并配置
npm i webpack-merge --save-dev