优化css
我们把文件打包后,可以看一下js、css 的处理,js 已被优化,css是未作处理的,请记住这一点。同样的步骤,安装插件,修改配置文件
npm install --save-dev optimize-css-assets-webpack-plugin
以后安装后都是引用的,就按照这个步骤来,以后就不提示了呀。
然后我们打包再次查看就会发现,css已经被处理了,可是js文件怎么变了,这是因为webpack 默认已经对js 做了优化,如果你修改的话,一定要这样再配置一下js的优化项。
安装
npm install --save-dev uglifyjs-webpack-plugin
修改配置文件
再次打包,好了完好如初了。
babel
现在我们开发中已经大量使用es6或者es7语法了,而对于不支持的浏览器,我们先转换为es5语法,babel就可以做这种事情,我们修改src下的index.js 文件,再把mode切换为开发环境
require('./css/index.css'); require('./css/index.scss'); let sayHello=(value)=>{ alert(`你好 ${value}`) } sayHello('qzy');
然后打包,我们查看打包后的main.js 文件,我们发现没有转换。
好了,安装
npm install babel-loader @babel/core @babel/preset-env --save-dev
@babel/core @代表官方 babel/core 核心模块 babel/preset-env es6 转换为es5, 注意 Babel 默认只转换新的 JavaScript 句法,而不转换新的 API,如果你想转化api如promise 需要引入 babel-polyfill。
修改配置文件如下 (loader)
再次打包,查看打包后的js 文件
已经转化为es5语法了。