初识webpack

今天有空,刚好学习了一点webpack相关的知识,在这里整理一番。

下面会给上我的GitHub,里面有6个小demo,分别是

1.hello webpack

2.多入口文件

3.使用Webpack CSS loader加载器

4.使用webpack Image loader 加载图片

5.使用uglify-js 压缩打包JS代码

这里可以不用npm进行uglify-js插件的安装,直接下面这样写


varwebpack=require('webpack');

module.exports={

        entry:'./main.js',

        output:{

              path:__dirname,

              filename:'bundle.js'

        },

      plugins:[

            newwebpack.optimize.UglifyJsPlugin({

                  compress:{

                        warnings:false

                  }

             })

      ]

};

6.使用webpack构建本地服务器

因为前5个demo都是用的live-server充当本地服务器,最后一个是用的常用的webpack-dev-server来搭建服务器

最后贴上webpack的几个npm安装


/*全局安装*/

npm install webpack -g

/*liver-server充当服务器*/

npm intall liver-server -g

/*init*/

npm init

/*cssloader*/

npm install css-loader --save-dev

npm install style-loader --save-dev

/*img loader*/

cnpm install url-loader --save-dev

cpnm install file-loader --save-dev

/*webpack搭建服务器*/

npm install webpack-dev-server --save-dev

这是GitHub地址:https://github.com/zhangjing9898/webpack.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,341评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,853评论 0 21
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 12,525评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,553评论 7 35
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,862评论 1 32

友情链接更多精彩内容