![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
金胜涛
这个作者很懒,什么都没留下…
展开
-
webpack资源加载
1.Loading Css module.exports={ entry:'./src/main.js', output:{ path:path.join(__dirname,'./dist/'), filename:'bundle.js' }, module:{ rules:[ { ...原创 2019-05-06 21:19:00 · 234 阅读 · 0 评论 -
webpack——Babel
babel babel是一个JavaScript编译器,可以把EcmaScript6编译成EcmaScript5 babel可以独立使用,但是独立使用没有意义,一般是和webpack结合到一起使用的 安装依赖: npm install --save-dev babel-loader babel-core babel-preset-env 配置: module: { rules: [ ...原创 2019-05-06 21:21:37 · 272 阅读 · 0 评论 -
webpack-dev-server
每一次手动打包很麻烦,而且即便有--watch也不方便,还需要自己手动刷新浏览器,所以webpack给你提供了一个工具:webpack-dev-server 它就可以实现监视代码改变,自动打包,打包完毕自动刷新浏览器的功能 安装: npm i -D webpack-dev-server 注意: webpack-dev-server 3.0及以上版本不再支持4.0版本以下的webpack,所以这里...原创 2019-05-06 21:23:26 · 144 阅读 · 0 评论 -
配置webpack不打包第三方包
通常情况下我们不打包第三方包,因为第三方包太大,和bundle打包到一起会造成资源体积过大,所以我们还是通过script标签的方式把第三方资源引入到页面中,只需要通过以下配置即可,这里以jQuery为例。 1、下载第三方包 npm i jquery 2、在页面中引入资源 <!--注意 这里的路径以最终的index.html文件位置为准--> <script src="....原创 2019-05-06 21:25:16 · 5445 阅读 · 1 评论 -
webpack——在模块化环境中使用vue-router
1、下载 npm i vue-router 2、引用资源 <script src="./node_modules/vue-router/dist/vue-router.js"></script> 3、配置externals externals:{ 'vue-router':'VueRouter' } 4、在router.js文件中加载使用 import Vue...原创 2019-05-06 21:26:26 · 706 阅读 · 0 评论 -
webpack——输出管理及打包单文件组件
HtmlWebpackPlugin 你会发现,当你打包结束的时候,如果index.html在根目录直接运行的话,那么图片资源这些路径就无法访问到了。解决方案是把index.html放入dist目录中,但是dist是打包编译的结果而非源码,所以把index.html放到dist中就不合适,而且你也会发现,我们打包的结果文件名:bundle.js,如果我把这个文件名改了,则index.html也要手动...原创 2019-05-06 21:29:03 · 984 阅读 · 0 评论