webpack随笔

webpack是什么？

webpack产生的原因？

一些新概念：

哪些问题没有搞好？

页面实时更新

webpack出现的原因是什么

开箱即用：安装以后直接可以用

社区：前端qq群，前端微信群，代码网址（github。。。）

Webpack的优缺点

安装：

局部安装：cnpm i -D webpack@3.4.0

全局安装：npm i -g webpack

npm i -D style-loader css-loader：i是install是简称，-D是--save-dev的简称

安装webpack以后不能在cmd里直接运行webpack 命令，要在npm script里运行

{

    loader:'css-loader',

    options:{

        minimize:true,

    }

}

和

'css-loader?minimize'的区别类似于get和post，学习新知识，尽量与旧知识结合起来，有利于更好地理解新知识、更快地掌握新知识

修改package.json/webpack.config.js需要重启才能看到效果

默认的sourcemap长得类似于'webpack://'的样子

css-loader：核心是css，把require('.css')放到html里等

style-loader：核心是style，把css放到<style>标签里

Entry的值是数组（2个文件），不会报错，是因为他只会导出最后一个文件，如果是对象，也有2个文件，就会报错，

原文链接：http://webpack.wuhaolin.cn/2%E9%85%8D%E7%BD%AE/2-1Entry.html

如果 entry 是一个 string 或 array，就只会生成一个 Chunk，这时 Chunk 的名称是 main；

如果 entry 是一个 object，就可能会出现多个 Chunk，这时 Chunk 的名称是 object 键值对里键的名称。

如果entry和output改成：

entry: {

    a: './main.js',

    b: './branch.js'

  },

output: {

    // 把所有依赖的模块合并输出到一个 bundle.js 文件

    filename: '[name].js',

    // filename: 'bundle.js',

    // 把输出文件都放到 dist 目录下

    path: path.resolve(__dirname, './dist'),

  },

生成的js文件是a.js和b.js

watch:false,调用webpack命令以后自动关闭

watch:true,调用webpack命令以后不会自动关闭，而是一直监听文件，只要文件改了，重新生成dist文件

watchOptions里的poll相当于setInterval

watchOptions里的aggregateTimeout相当于setTimeout

问：什么是按需加载组件？

答：vue-router点击哪个组件，就加载哪个组件，而不是一次性全部加载完毕，提高页面首屏加载速度

为什么要用file-loader：webpack不能处理js以外的文件，避免缓存，让图片模块化

用base64格式的图片有什么好处？

减少http请求，但是坏处是转成base64以后文件会变大，所以这种方式只适合小图片

由于 raw-loader 会直接返回 SVG 的文本内容，并且无法通过 CSS 去展示 SVG 的文本内容，因此采用本方法后无法在 CSS 中导入 SVG。 也就是说在 CSS 中不可以出现 background-image: url(./svgs/activity.svg) 这样的代码，因为 background-image: url(<svg>...</svg>) 是不合法的。

为什么要在package.json里写‘devDependencies’？

vue-router为什么没写在devDependencies，项目也能运行？

因为项目是去node_modules里找的，devDependencies不是给程序用的，是给不同的开发者用的，这样，把项目给其他人，其他人就知道项目里用了哪些包，直接cnpm i以后就能运行了，所有安装时要'--save-dev'或者'-save'