webpack学习笔记

1】、webpack是最近比较流行的模块化工具，天生支持commonjs规范,设计思想是--require anything，就是想把前端涉及到的所有文件都通过js的require组织起来，最后以js为入口，通过nodejs把Commonjs规范下的模块，全部转换成浏览器支持的function模块，然后再用一个编译加载器来组织这些模块，这样commonjs的模块化方案就可以通过webpack的转换在浏览器上运行了。他能够require anything的基础就是因为他有各式各样的loader来引用各种各样的文件.

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

2】、webpack的安装，一般通过npm来安装webpack

3】、webpack-dev-server

作用：前端开发服务器，启动后可以用localhost的形式来访问我们的项目。webpack最大的用处是监听文件的改变，来自动刷新浏览器

4】、webpack具体使用方法？

1）、使用npm安装webpack，创建package.json文件，创建项目结构，基于commonjs规范定义各个模块

2）、创建webpack.json.js文件

3）、在package.json中的script中可以设置简化的webpack执行命令

4）、安装webpack本地服务器，用于让浏览器监听文件改变，npm install --save-dev webpack-dev-server

5) 、给webpack的script设置执行本地服务器的命令

6）、loader：通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同风格的文件的处理，主要是处理源文件，比如把scss转换为css，把下一代的js文件ES6转换为浏览器兼容的js文件。loader需要在webpack.json.js的module关键字下进行配置，

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

项目中使用的loader有：css-loader,style-loader html-loader

7）、插件：Plugins 用来增强webpack功能的，并不直接操作单个文件，而是直接在整个构建过程起作用，使用插件首先需要用npm安装插件，其次在webpack.json.js文件的Plugins 关键字下进行添加该插件的实例。

HtmlWebpackPlugin：可以自动为我们生成HTML并插入对应的js和css文件

5】、 js用什么loader加载？官方文档例子中entry只有一个js，我们有多个怎么办？

babel-loader

用逗号分隔，加载多个

6】、output里面文件夹存放目标文件，怎么设置？

path：对应生成的文件路径

filename：对应生成的文件名

publicPath：用于存放静态资源文件路径，

7】、样式使用怎样的loader？webpack打包的css怎么独立成单独的文件？

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

单独打包CSS，需要在webpack使用一个插件：extract-text-webpack-plugin。该插件的作用主要是为了抽离CSS，防止将样式打包在js中引起页面样式加载错乱的现象。

操作步骤：

1）、安装插件：npm install extract-text-webpack-plugin –save-dev

2）、在webpack.config.js中声明插件

// 引入css 单独打包插件 var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件 var packCSS = new ExtractTextPlugin('./css/[name].min.css');

3）、在js中require引用对应的css文件，然后这个插件会自动将js的css文件提取出来，生成单独的文件。

8】、要提取公共模块，怎么处理？

使用CommonChunkPlugin插件，负责将多次被使用的js模块打包在一起，

使用方法：在webpack.json.js中的plugins属性里添加CommonChunkPlugin实例，配置几个属性:name:块的名称，filename：公共模块的文件名模板，