webpack打包如何减少json文件

使用babel-minify-webpack-plugin插件可以帮助减少json文件的体积。安装插件之后，在webpack配置文件中添加如下内桥蚂容plugins: [newBabiliMinifyPlugin()

]这样就可以有效地减少json文件的体积，从而提高构建性能和减少服缓升务器空间消耗敏哪埋。

技术胖webpack教程

webpack中使用echarts

在 webpack 的入口文件中直接引入第三方类库,向晌毕外全局暴露，以 jquery 插件使用为例

1.创建本地项目 webpack-demo

2.在 webpack-demo 的根目录下创建 package.json 文件

模宴和芹块说明：

4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置

5.安装相关的 loader

6.安装jquery

7.在入口文件 app.js 中引入 jquery

8.给按钮绑定事件

9.运行命令

10.结果展示

通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例

1 ~ 5步同上

6.安装echarts

7.在webpack.config.js中进行配棚老置

7.创建echart容器

8.初始化echarts

9.运行命令

10.结果展示

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中 loader 有两个属性：

本节要实现的功能：

rules执行顺序由右往左，由下往上。所以会先执行 sass-loader -> css-loader -> style-loader

将 欢迎来到瓦力博客 加一点样式，让文字的颜色变红，水平居中

在 webpack.config.js 文件中处理css文件扮侍规则写好后，我们还需要安装 style-loader 、 css-loader loader。安装方式如下。如果想要了解 style-loader {:target="_blank"}、 css-loader {:target="_blank"}

看到命令框输出的信息中包含 ./src/index.js 和 ./src/assets/css/index.css 就说明css样式被打包到了main.js文件中。接下来手动打开 dist/index.html 文件

在 assets 目录下面新增 sass 目录，然后在 sass 目录下新建一个 index.scss

将字体颜色变成白色，背景色变为蓝色。

在这里陪雀解释一下 importLoaders:2，当a.scss文件中有 @improt b.scss文件时，需要重新加载css-loader前两个loader插件，在这里就是sass-loader，因为执行顺芦缺早序是由下往上，由右往左

在 assets 目录下面新增 less 目录，然后在 less 目录下新建一个 index.less

将字体颜色变黑，然后添加一个红色的边框

不管是写 css , sass , less , postCss 样式，在css3新特性下，我们是要添加浏览器厂商前缀的。如果没有浏览器厂商前缀，同一套样式不同浏览器展现的样式是不同的。之前写css都是手动添加，那样子实在是太繁琐了。

从小菜的截图中可以看到 css 、 less 、 scss 文件。css3新属性的浏览器厂商前缀已经添加上了。

---