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才会变,可以利用这个特性来做改变之后的文件上传。

未完待续。。。

---