webpack 面试题

1, webpack 是一款模块化打包工具，webpack 是基于配置的，通过配置一些选项来让 webpack 执行打包任务。
webpack 在打包的时候，依靠依赖关系图，在打包的时候需要告知 webpack 两个概念：入口和出口

2、webpack 和 gulp 对比
Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与 压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点，“Gulp 就像是
一个产品的 流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管 理。”另外，Gulp 是通过 task 对整个开发过程进行构建。

Gulp 是基于流的前端自动化构建工具，基于流的任务式的工具。
Webpack 是一款模块化打包工具，webpack 是基于配置的。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照 依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔， 等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比 如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp 和 Webpack 功能实现对比：从基本概念、启动本地 Server、sass/less 预编译、模块化 开发、文件合并与压缩、mock 数据、版本控制、组件控制八个方面对 Gulp 和
Webpack 进行对比。
详细参见：http://www.tuicool.com/articles/e632EbA
一百〇三、webpack 打包文件太大怎么办？
webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也 会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割， 设置缓存几个 方面着手优化。
详细参见：http://www.jianshu.com/p/a64735eb0e2b

一百〇四、谈谈你对 webpack 的看法
WebPack 是一个模块打包工具，你可以使用 WebPack 管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web 开发中所用到的 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack 有对应的模块加载器。webpack 模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。
webpack 的两大特色：
1.code splitting（可以自动完成）
2.loader 可 以 处 理 各 种 类 型 的 静 态 文 件 ， 并 且 支 持 串 联 操 作webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面， 方便旧项目进行代码迁移。
webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：
1.对 CommonJS 、 AMD 、ES6 的语法做了兼容
2.对 js、css、图片等资源文件都支持打包
3.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对
CoffeeScript、ES6 的支持
4.有独立的配置文件 webpack.config.js
5.可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
6.支持 SourceUrls 和 SourceMaps，易于调试
7.具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

一百〇八、webpack 怎么引入第三方的库？
拿 jQuery 为例：
entry: {
page: ‘path/to/page.js’,
jquery: ‘node—modules/jquery/dist/jquery.min.js’
}
new HtmlWebpaekPlugin({ filename: ‘index.html’, template: ‘index.html’, inject: true,
chunks: [‘jquery’,‘page’]}) // 按照先后顺序插入 script 标签

四十三、Webpack
1.全局安装
安装 npm i webpack -g
4.x 还需要装 npm i webpack-cli -g
2.在当前目录下也要安装一次
npm i webpack --save -dev
npm i webpack-cli --save -dev
3 在文件夹中创建一个文件夹 src，在其中创建一个 index.js，作为入口文件
压缩可以直接使用命令：webpack，可以直接打包生成 dist 文件夹下，有一个压缩后的 main.js,即默认的出口
如果不想让它压缩就可以使用命令 webpack --mode=development
默认是压缩的 webpack --mode=prodection
4 在 src 中新建一个 webpack.config.js 文件
var path = require(“path”)
module.exports = { //这里在官网 api 有直接复制改一下 path 路径就可以了
entry:’./src/index.js’, //入口文件ouput : { //出口文件path : path.resolve( dirname,’dist’),
filename:’main.js’
}
}
5.安装自动生成 index.html 插件 npm i html-webpack-plugin --save
6.在 config.js 文件中引入
var htmlWebpackPlugin = require(“html-webpack-plugin”);
并且在 module.exports 中引入
entry :
output :
plugins : [new htmlWebpackPlugin({ template : ‘index.html’
})]
7.在 src 下新建 css 文件，安装 npm i style-loader css-loader --save-dev
8.在 config.js modul.exports 引入module ： ｛ //官网也有 loader rules： [
{
test : /.css$/,
use :[ ‘style-loader’,’css-loader’]
} //每安装一个 loader，都引入一个这样的对象
]
｝
图片的 urlloader
html 的 html-withimg-loader

七十八、怎么配置 Webpack
在 webpack.config.js 中配置多入口多出口,单入口单出口,单入口多出口,插件在
plugin 中配置

webpack
webpack 是一款模块化打包工具，webpack 是基于配置的，通过配置一些选项来让 webpack 执行打包任务。
webpack 在打包的时候，依靠依赖关系图，在打包的时候需要告知 webpack 两个概念：入口和出口
一般情况下，我们需要使用 webpack.config.js 进行配置
是静态资源打包器
特色：
（1）可以自动化完成
（2）可以处理各种类型的静态文件，并支持串联操作

webpack 按照依赖和规则打包成渡河生产环境部署的前端资源，还可以将按需加载的模块进行代码分隔，等到实际需要的时候在异步加载

webpack 的结构，并且简述里面常用的插件，优化方案babel-loader 进行转码

css-loader 对 css 文件进行打包style-loader 将样式添加进 DOM 中
url-loader 图片自动转成 base64 编码的####entry
entry 配置项目打包的入口，值可以为单个的字符串执行某一个文件的地址，这个时候该文件就是入口文件，webpack 会根据入口文件里各模块间的关系形成依赖关系图，然后根据依赖关系图进行打包

path:path.join( dirname,'build'), filename:'app.js'
}```
但是有的时候我们需要的是多入口，我们就写成数组的形式，数组里的每一个字符串地址指向的都是一个独立的入口，webpack 会将这些入口的依赖打包
```entry:['./src/app.js','./src/vendor.js'], output:{
path:path.join( dirname,'build'),
filename:'[name].js'//不确定名字的时候，这里会打包成 main.js
}```
刚才的两种 entry 配置都只会打包出一个 js 文件，但是在某一个应用中我们可能需要将 js 根据依赖关系打包成多个 js 文件，并且在多页面应用中，我们也确实不可能只使用一个 js 文件，那么我们就可以使用如下的配置：


``

entry:{
app:'./src/app.js', vendor:'./src/vendor.js'
},
output:{
path:path.join( dirname,'build'), filename:'[name]_[hash].js'
}

这样，因为 filename 里写成名字是[name],所以会根据 entry 的配置的键名来为打包出的 js 文
件命名，hash 是每次打包的一个随机的 hash 值，可以用来做版本控制

output
在这里我们配置打包输出的一些选项
filename 可以确定打包出来的文件的名字，在里面我们可以使用[name],[hash]这样的占位符path 配置打包出去的文件的路径，需要是绝对路径
env
在命令行或者终端中执行 webpack --env hello 命令，就相当于在打包的时候传入一个参数为hello

在 webpack.config.js 中可以暴露出一个函数，这个函数就可以接收到 env 参数，当然函数就可以根据 env 参数来有选择的返回某一个或多个配置对象

module.exports = (env)=>{ if(env=='production'){
return productionConfig
}
return developmentConfig
}

 plugins
在 webpack 编译用的是 loader，但是有一些 loader 无法完成的任务，交由插件（plugin）来完成，插件的时候需要在配置项中配置 plugins 选项，值是数组，可以放入多个插件的使用， 而一般的插件都是一个构造器，我们只需在 plugins 数组中放入该插件的实例即可，在实例化插件的时候又可以传入 options，对插件的使用进行配置

```html-webpack-plugin
这个插件可以选择是否依据模板来生成一个打包好的 html 文件，在里面可以配置、title、
template、filename、minify 等选项，详情请查阅[文档](https://segmentfault.com/a/1190000007294861)

在这个插件里，我们可以使用 jade、hbs、ejs 等模板引擎来编译成 html，这里举例 jade 的配置：
[文档](https://segmentfault.com/a/1190000000357534)

npm i jade jade-loader --save-devmodule:{ rules:[
{ test:/.jade$/,
use:‘jade-loader’
}
]
},
plugins:[
new HtmlWebpackPlugin({
// title:‘webpack-config-demo’, template:’./src/index.jade’, filename:‘index.html’
})
]

webpack-dev-server
webpack 相辅相成的有一个 server 功能工具可以提供开发的热更新服务器
npm install webpack-dev-server -g npm install webpack-dev-server -D

第一种启动方式： 直接执行 webpack-dev-server,如果有需要配置的选项，在后面跟上参数即可。例如

webpack-dev-server --hot true

第二种启动方式：在 webpack.config.js 中配置 devServer 的选项，执行 webpack-dev-server 就 ok
```devServer:{
port:9000, contentBase:'./build', historyApiFallback: true, open: true,
proxy:{
}
}```

 LOADERS
在 webpack 中专门有一些东西用来编译文件、处理文件，这些东西就叫 loader，loader 的使用就是在配置项中，设置 modules，在 modules 中设置 rule 值为数组，在数组里放入多个匹配规则：

```module:{
rules:[
{test:/\.css$/,use:'css-loader'}
],
//before loaders:[
{test:/\.css$/,loader:'css-loader'}
],
}

webpack 相辅相成的有一个 server 功能工具可以提供开发的热更新服务器
npm install webpack-dev-server -g npm install webpack-dev-server -D

第一种启动方式： 直接执行 webpack-dev-server,如果有需要配置的选项，在后面跟上参数即可。例如

webpack-dev-server --hot true

第二种启动方式：在 webpack.config.js 中配置 devServer 的选项，执行 webpack-dev-server 就 ok
```devServer:{
port:9000, contentBase:'./build', historyApiFallback: true, open: true,
proxy:{
}
}

test 为此次匹配要匹配的文件正则规则，use 代表要使用的 loader
使用 url-loader 可以将 css 中引入的图片（背景图）、js 中生成的 img 图片处理一下，生成到打包目录里
视图 html-withimg-loader 可以将 html 中 img 标签引入的 img 图片打包到打包目录file-loader

{


test:/\.(png|jpe?g|svg|gif)$/,
// use:'url-loader?limit=1000&name=images/[hash:8].[name].[ext]' use:[
{

loader:'url-loader',
options:{ limit:1000,
name:'/static/images/assets/[hash:8].[name].[ext]'
}
}
]
},
{


}

test:/.html$/,
use:‘html-withimg-loader’

处理 css：
cnpm i css-loader style-loader --save-dev 配置：
{
test:/.css$/,
use:[‘style-loader’,‘css-loader’]
}

注意。webpack 中 loader 的使用是从后往前的
css-loader 可以将引入到 js 中的 css 代码给抽离出来，style-loader 可以将抽离出来的 css 代码放入到 style 标签中
处理 sass
{
test:/.scss$/,
use:[‘style-loader’,‘css-loader’,‘sass-loader’]
},
将引入项目的 css 文件、scss 文件抽成一个文件，引入到页面中cnpm i extract-text-webpack-plugin

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
///loader
{
test:/\.css$/,
use:ExtractTextWebpackPlugin.extract({ fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.scss/, use:ExtractTextWebpackPlugin.extract({ fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
}
///plugin
new ExtractTextWebpackPlugin({ filename:'app.css', allChunks:true
})

处理 es6：
需 要 的 依 赖 ： “babel”: “^6.23.0”,
“babel-core”: “^6.24.1”,
“babel-loader”: “^7.0.0”,
“babel-preset-es2015”: “^6.24.1”,
“babel-preset-react”: “^6.24.1”,

rules：
{
test:/.js$/,
exclude: /node_modules/, loader:‘babel-loader’, query: {
presets: [‘es2015’,‘react’]
}
}

一百四十五、webpack 打包压缩代码：
plugins:[
new webpack.optimize.UglifyJsPlugin({ output: {
comments: false, // 移除所有的注释
},
compress: {
warnings: false //map 可以在控制台寻找错误
}
})
]

九十七、如何利用 webpack 把代码上传服务器以及转码测试?
代码上传：
可以使用 sftp 一 webpack 一 plugin,但是会把子文件夹给提取出来，不优雅。可以使用 gulp +webpack 来实现。
转码测试
webpack 应用 babel 来对 ES6 转码，开启 devtool: “source 一 map"来进行浏览器测试。应用 karma 或 mocha 来做单元测试。