程序员花费3小时总结：前端面试之webpack篇

Posted 2021-04-29 变美路上

照样之前一样，有些概念面试可以或许会考，我都用*标记了出来，两句话就总结清楚其他的处所假定你想知道webpack，就细心看看，当然本教程不克不及让你webpack玩的很6，然则懂操作流程够了。面试你通俗问你webpack的事理，Loader的事理，你有效那些优化编制

这篇文章共享之前我还是要保举下我自个的前端群：657137906，非论你是小白还是大年夜大年夜牛，小编我都挺等待，不按期共享干货，包含我自个清算的一份2017最新的前端资料和零根本入门教程，等待初学和进阶中的小火伴。

前端开辟曾模块化，它改进了代码库的封装和布局。打包对象曾成了一个项目必弗成少的局部，

此刻这儿有几种可以或许的选择，例如webpack，grunt，gulp等。

webpack因为他的功用和扩大性在之前的几年中，遭到异常大年夜大年夜的迎接。然则webpack的设备老是让人觉得很猜疑，

明天我们将从一个空的设备文件垂垂完成一个完全的设置遏制打包文件。

概念

不像大年夜大年夜多半的模块打包机，webpack是收把项目算作一个全部，经过过程一个给定的的主文件，webpack将从这个文件末尾找到你的项目标一切依托文件，应用loaders措置它们，最后打包成一个或多个浏览器可识其他js文件

install

起首添加我们即将应用的包：

npm install webpack webpack-dev-server --save-dev

webpack是我们需要的模块打包机，webpack-dev-server用来创建本地处事器，监听你的代码批改，并主动刷新批改后的结果。这些是有关devServer的设备

contentBase, // 为文件供给本地处事器port, // 监听端口，默许8080inline, // 设置为true,源文件产生改动主动刷新页面historyApiFallback // 依托html5 history API,假定设置为true,一切的页面跳转指向index.htmldevServer:{ contentBase: './src' // 本地处事器所加载的页面地址的目次 historyApiFallback: true, // 不跳转 inline: true // 及时刷新}然后我们在根目次下创建一个'webpack.config.js'，在'package.json'添加两个敕令用于本地开辟和分娩颁布发表 "scripts": { "start": "webpack-dev-server", "build": "webpack" }

在应用webpack敕令的时辰，他将采取webpack的设备文件，除非我们应用其他的操作

entry

entry: 用来写出口文件，它将是全数依托关系的根

var baseConfig = { entry: './src/index.js' }

当我们需要多个出口文件的时辰，可以把entry写成一个对象

var baseConfig = { entry: { main: './src/index.js' } }

我建议应用前面一种编制，因为他的范围会随你的项目增大年夜大年夜而变得繁琐

output

output: 即便出口文件有多个，然则只要一个输入设备

var path = require('path') var baseConfig = { entry: { main: './src/index.js' }, output: { filename: 'main.js', path: path.resolve('./build') } } module.exports = baseConfig

假定你定义的出口文件有多个，那么我们需要应用占位符来确保输入文件的独一性

output: { filename: '[name].js', path: path.resolve('./build') }

此刻这么少的设备，便可以或许让你运转一个处事器并在本地应用敕令npm start或许npm run build来打包我们的代码遏制颁布发表

Loader

loader的传染：

1、完成对不合格局的文件的措置，比如说将scss转换为css，或许typescript转化为js

2、转换这些文件，从而使其可以或许被添加到依托图中

loader是webpack最首要的局部之一，经过过程应用不合的Loader，我们可以或许调用外部的脚本或许对象，完成对不合格局文件的措置，loader需要在webpack.config.js里边伶仃用module遏制设备，设备以下：

test: 婚配所措置文件的扩大名的正则表达式（必须） loader: loader的称号（必须） include/exclude: 手动添加措置的文件，樊篱不需要措置的文件（可选） query: 为loaders供给额外的设置选项 ex: var baseConfig = { // ... module: { rules: [ { test: /*婚配文件后缀名的正则*/, use: [ loader: /*loader名字*/, query: /*额外设备*/ ] } ] } }

假定loader任务，我们需要一个正则表达式来标识我们要批改的文件，然后有一个数组暗示

我们暗示我们即将应用的Loader,当然我们需要的loader需要经过过程npm 遏制装配。例如我们需要解析less的文件，那么webpack.config.js的设备以下：

 var baseConfig = { entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.resolve('./build') }, devServer: { contentBase: './src', historyApiFallBack: true, inline: true }, module: { rules: [ { test: /\.less$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'} ], exclude: /node_modules/ } ] } }

这里引见几个常常利用的loader：

babel-loader： 让下一代的js文件转换成现代浏览器可以或许撑持的JS文件。

babel有些复杂，所以大年夜大年夜多半都邑新建一个.babelrc遏制设备

css-loader,style-loader:两个建议合营应用，用来解析css文件，可以或许诠释@import,url()假定需要解析less就在前面加一个less-loader

file-loader: 生成的文件名就是文件内容的MD5哈希值并会保管所援引本钱的原始扩大名

url-loader: 功用类似 file-loader,然则文件大年夜大年夜小低于指定的限制时，可之前去一个DataURL抱负上，在应用less,scss,stylus这些的时辰，npm会提示你差甚么插件，差甚么，你就安上就好了

Plugins

plugins和loader很随便弄混，说都是外部援引有甚么差别呢？ 抱负上他们是两个完全不合的器械。这么说loaders担负的是措置源文件的如css、jsx，一次措置一个文件。而plugins其实不是直接操作单个文件，它直接对全数构建过程起传染下面列举了一些我们常常利用的plugins和他的用法

ExtractTextWebpackPlugin: 它会将出口中援引css文件，都打包都自力的css文件中，而不是内嵌在js打包文件中。下面是他的应用

 var ExtractTextPlugin = require('extract-text-webpack-plugin') var lessRules = { use: [ {loader: 'css-loader'}, {loader: 'less-loader'} ] }  var baseConfig = { // ... module: { rules: [ // ... {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)} ] }, plugins: [ new ExtractTextPlugin('main.css') ] }

HtmlWebpackPlugin:

传染： 根据一个简单的index.html模版，生成一个主动援引你打包后的js文件的新index.html

 var HTMLWebpackPlugin = require('html-webpack-plugin') var baseConfig = { // ... plugins: [ new HTMLWebpackPlugin() ] }

HotModuleReplacementPlugin: 它许可你在批改组件代码时，主动刷新及时预览批改后的结果寄望永久不要在分娩状况中应用HMR。这儿说一下通俗状况分为开辟状况，测试状况，分娩状况。

用法如 new webpack.HotModuleReplacementPlugin()

 webapck.config.js的全数内容 const webpack = require("webpack") const HtmlWebpackPlugin = require("html-webpack-plugin") var ExtractTextPlugin = require('extract-text-webpack-plugin') var lessRules = { use: [ {loader: 'css-loader'}, {loader: 'less-loader'} ] } module.exports = { entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.resolve('./build') }, devServer: { contentBase: '/src', historyApiFallback: true, inline: true, hot: true }, module: { rules: [ {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)} ] }, plugins: [ new ExtractTextPlugin('main.css') ] } 

产品阶段的构建

今朝为止，在开辟阶段的器械我们曾根基完成了。然则在产品阶段，还需要对本钱遏制其他

措置，例如缩短，优化，缓存，辨别css和js。起首我们来定义产品状况

var ENV = process.env.NODE_ENV var baseConfig = { // ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(ENV) }) ] }

然后还需要批改我们的script敕令

 "scripts": { "start": "NODE_ENV=development webpack-dev-server", "build": "NODE_ENV=production webpack" }

process.env.NODE_ENV 将被一个字符串替代，它运转缩短器清除那些弗成达到的开辟代码分支。

当你引入那些不会遏制分娩的代码，下面这个代码将异常有效。

 if (process.env.NODE_ENV === 'development') { console.warn('这个警告会在分娩阶段消掉落') }

优化插件

下面引见几个插件用来优化代码

OccurenceOrderPlugin: 为组件分拨ID,经过过程这个插件webpack可以分解和优先揣摩应用最多 的模块，然后为他们分拨最小的ID

UglifyJsPlugin: 缩短代码

下面是他们的应用编制

var baseConfig = {

// ...new webpack.optimize.OccurenceOrderPlugin()new webpack.optimize.UglifyJsPlugin()

}

然后在我们应用npm run build会发现代码是缩短的

总结

webpack的设备文件的复杂度，依托于你项目标需要。寄望的应用他们。因为跟着项目标增加，它们会变得很难征服。内容有点多，抱负上总结起来也不是出格多，也就Loader，plugins。其他的处所都对比简单。这篇文章大年夜大年夜概花了我三天的工夫，网上看各类教程，然后看官网，真挺累的。这儿写完我就去睡觉

最后在说几句：

1. 凶悍法度典型员相干于深切法度典型员的优势在于：

2. 写出的代码更随便排错，不是高手的代码就不会错，而是高手的代码出了错随便找。高手的代码可读性必定很好，模块清楚，定名规范，格局工整，关头的处一切注释，出了异常有log，天然随便排错，即便交给他人去debug也是对比随便的。

3. 明天这个图片弹窗殊效到这里写完了，进修web前端的可以加我的群，每天禀享对应的进修资料：657137906，迎接初学和进阶中的小火伴。多写多练。

假定想看到加倍系统的文章和进修编制经历可以存眷我的微信大众号：‘前端根据地’存眷后答复‘给我资料’可以付出一套完全的进修视频