写这篇文章背景:之前有看过webpack文章,但是并没有实际运用到。今天做项目突然想用es6,尝试过用gulp。但是总会因为编译报错而停止,一怒之下就开始使用webpack管理。顺便记下些笔记。
配置文件就不再多说了,主要是记录下引入第三方文件的问题。
1.引入iconfont
首先把生成的iconfont文件都扔进项目中。不仅仅只是css!不仅仅只是css!不仅仅只是css!也不用改路径什么的(网上大神说修改路径不知道是怎么样的,也比较好奇)。然后在配置文件把一些 loader加入就好了。最后在页面中 import "iconfont/iconfont.css" ;
2.引入bootstarp
配置文件中 plugins 属性中 放入 new webpack.ProvidePlugin({jQuery: 'jquery', $: 'jquery', jquery: 'jquery'}),
之后 npm install jquery --save-dev,npm install bootstrap --save-dev。
在入口文件中放入 import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js';
------------------------------------------------------------------------------------
今天又碰到新的问题,分离css样式
webpack4 执行 npm install extract-text-webpack-plugin@next
webpack3 执行npm install extract-text-webpack-plugin
------------------------------------------------------------------------------------
今天聊聊Shimming
全局 exports
在需要引入的文件中写入 var a = require("exports-loader?file,parse=helpers.parse!./xxxx.js"); 然后a.file和a.parse使用