webpack学习笔记

webpack其实就是一个前端开发用的打包软件,提升性能,实现类似懒加载的功能,按需加载模块,下面是看官方文档,看慕课视频做的一些笔记。


首先是全局安装

npm install webpack -g

1.安装好之后,需要npm init初始化

然后npm install webpack —save-dev

在当前文件夹安装webpack

2.要打包css文件需要style-loader(让浏览器识别处理完的css)和css-loader(可以让webpack处理css文件),这两个也需要安装

npm install css-loader style-loader —save-dev

并且需要

require('style-loader!css-loader!./hello.css')

3.不加上面两个loader也可以实现的,在命令行里面输入

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' —watch

其中—watch是让文件有更新就打包

还有--process可以看到打包具体过程

还有—display-module可以看打包的模块

—display-reasons可以看到为什么打包这个模块

webpack 基本配置

module.exports = {

entry: './src/script/main.js',

output: {

path: __dirname + '/dist/js',

filename: 'bundle.js'

}

}

只写成path: ‘dist/js’

是不行的哦

entry 可以是一个文件,require很多文件,模块

也可是一个数组,依赖很多模块,解决平级模块的问题

也可以是一个对象,多页面会用到这种方式

如果是一个对象的话,这里必须要用到占位符[name],[hash],[chunkhash]了

{

entry: {

app: './src/app.js',

search: './src/search.js'

},

output: {

filename: '[name].js',

path: __dirname + '/build'

}

}

hash,保障文件的唯一性,文件更改了hash才会变,可以利用这个特性来做改变之后的文件上传。


未完待续。。。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,547评论 7 35
  • Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成...
    EarthChen阅读 3,089评论 0 1
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,334评论 7 110
  • 这是我第二次学习webpack了,初见他时,我是一脸懵逼的,这次再见时,稍微轻松了一点,现在写下这份学习笔记,用来...
    ruby0922阅读 2,463评论 0 0
  • 目录: 一切都是最好的安排,根据兴趣随便选书! 大道至简,我还差得远呢,你能悟道多少? 给大脑做锻炼,下一部书:关...
    静赏月之美阅读 4,348评论 0 1