“约见”面试官系列之常见面试题之第八十一篇之webpack（建议收藏）

从我进公司那天起，公司就一直在用webpack，这是一个前端自动打包工具，但我以前从来没接触过，不过幸好我聪明机智，天赋异禀，倒是能上手用，只不过有些配置还是看不懂，于是，我就趁着项目空闲时间好好研究了一下webpack这个打包工具，下面我说一下对webpack的个人理解：

首先，我觉得webpack总得来说是一个js打包工具，它的思想是模块化思想，一切都可以成为模块，不管你是js，css，还是scss，less，还是jsx，webpack统统都能打包，它有一个入口（多页面应用还没研究，，等研究了再发上来），所有的要打包的文件，都要通过这个入口进来，然后再配置一个出口，就ok了，其中要好多配置，我在这里写了一个简单的例子，先看我的结构

首先你要初始化一个package.json，在这之前你要下载安装一个node.js，因为这里所有的一切都是基于node.js的

npm init

然后一直回车，就能出来这个文件了

webpack三大组成构件，是package.json, webpack.config.js, server.js

package.json是下载项目需要的依赖包，webpack.config.js是配置webpack的打包文件的配置，server.js是利用webpack自带的服务器在自己电脑上起一个服务

下面是webpack.config.js：

这里石油4个部分组成，1.entry：入口

entry:{
		"main":["./src/main.js"],
		"vendor":['jquery']
	},

2.ouput：出口

output:{
		path:path.resolve(__dirname,'./dist'),
		filename:"js/[name].bundle.js"
	},

3.module：这个里面是处理各种文件的loader

module:{
		loaders: [
			{
			   	test:/\.js$/,
			   	loader:'babel-loader',
			   	exclude:/node_modules/
			},{
				test:/\.scss$/,
				loader:  extractTextWebpackPlugin.extract({
						fallback: 'style-loader',
						use: 'css-loader!sass-loader'
				})
			},{
				test:/\.(jpg|png|gif|jpeg)$/,
				loader: 'url-loader?limit=8192&name=./img/[name].[ext]',
			},{
				test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
          		loader: 'file-loader?name=./fonts/[name].[ext]',
			}
			,{
	　　　　　　test: /\.html$/,
	　　　　　　loader: 'html-withimg-loader'
　　　　　　}
		]
	},

处理图片，用url-loader，可以把用到的图片，打包到指定目录，但是如果单纯只是下面的配置的话，只有css中用到的图片会被打包过去，html中的引用的图片就不会被打包过去

test:/\.(jpg|png|gif|jpeg)$/,
loader: 'url-loader?limit=8192&name=./img/[name].[ext]',

如果想把html中引用的图片打包过去的话，需要再下载一个loader html-withimg-loader
然后再下边配置

处理字体，用file-loader
处理es6,7等用babel-loader，这个loader能把es6,7的语言转化为浏览器能识别的es5语法
处理scss，用css-loader和sass-loader，还有style-loader，但是sass-loader的使用必须要有node-sass，所以别忘了下载node-sass

4.plugins：webpack用到的插件

plugins: [
		new extractTextWebpackPlugin('main.css'),
        new HtmlWebpackPlugin({
           	filename:'index.html',
	    	template:'src/index.html',
	    	chunks: ['vendor', 'main']
        }),
        new webpack.HotModuleReplacementPlugin(), //热加载插件
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'js/vendor.chunk.js'}),
        new copyWebpackPlugin([
		    {
		    	from: './src/mock', to: './mock'
		    }
	    ])
    ]

extract-text-webpack-plugin，这个插件是把css从js中分离出来的插件

html-webpack-plugin，这个插件是规定html的入口以及出口路径，以及script中要引用的文件

HotModuleReplacementPlugin这个插件属于热插拔插件，就是只要项目中任何地方，有改动，浏览器就会动态刷新，自动查看效果，不用手动刷新了

webpack.optimize.CommonsChunkPlugin，这个插件是将引入的依赖的框架代码统统整合到这个js文件里面，自己写的文件在自己的main里面

copyWebpackPlugin，这个插件是纯复制的一个插件，把一个文件夹从某一路径原封不动的复制到指定路径，没什么好说的，可以自行百度

下面来个整体的配置

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
	entry:{
		"main":["./src/main.js"],
		"vendor":['jquery']
	},
	output:{
		path:path.resolve(__dirname,'./dist'),
		filename:"js/[name].bundle.js"
	},
	module:{
		loaders: [
			{
			   	test:/\.js$/,
			   	loader:'babel-loader',
			   	exclude:/node_modules/
			},{
				test:/\.scss$/,
				loader:  extractTextWebpackPlugin.extract({
						fallback: 'style-loader',
						use: 'css-loader!sass-loader'
				})
			},{
				test:/\.(jpg|png|gif|jpeg)$/,
				loader: 'url-loader?limit=8192&name=./img/[name].[ext]',
			},{
				test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
          		loader: 'file-loader?name=./fonts/[name].[ext]',
			}
			,{
	　　　　　　test: /\.html$/,
	　　　　　　loader: 'html-withimg-loader'
　　　　　　}
		]
	},
	plugins: [
		new extractTextWebpackPlugin('main.css'),
        new HtmlWebpackPlugin({
           	filename:'index.html',
	    	template:'src/index.html',
	    	chunks: ['vendor', 'main']
        }),
        new webpack.HotModuleReplacementPlugin(), //热加载插件
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'js/vendor.chunk.js'}),
        new copyWebpackPlugin([
		    {
		    	from: './src/mock', to: './mock'
		    }
	    ])
    ]
}

第三大块，server.js,在自己的本地起一个服务

var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config.js');
config.entry.main.unshift("webpack-dev-server/client?http://0.0.0.0:2014/", "webpack/hot/dev-server");

var server = new webpackDevServer(webpack(config),{
	contentBase: './dist'//这是基于哪个文件夹,
	noInfo: false,
	historyApiFallback: true,
	disableHostCheck: true
})

server.listen(2014, '0.0.0.0', function (err) {
	if(err){
		console.log(err);
	}
	console.log('listening at localhost:2014')
})

下面看一下我的各种文件

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
	<div>你好adfsg</div>
	<i class="fa fa-taxi" aria-hidden="true"></i>
	<img src="img/54587e7333ef462e0d67b0b63a79d230.jpg">
</body>
</html>

main.js:

require('./main.scss');
var sum = () => 1 + 2;
// var sum = function() {    
//     return 1 + 2; 
// };
console.log(sum());

main.scss:

@import './css/font-awesome.css';
h1{
	color:#000;
	background: url('img/21464b3c0951c7ce99c2acdf0bcaebb0.jpg');
}
.add{
	background: url('img/72f082025aafa40f34c69ce4a064034f78f01982.jpg');
}
.add2{
	background: url('img/20130322201640_n8dyK.thumb.700_0.jpeg');
}

package.json:

{
  "name": "webpack-demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config ./webpack.config.js",
    "server": "node ./server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "html-withimg-loader": "^0.1.16",
    "jquery": "^3.2.1",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "scss-loader": "^0.0.1"
  }
}

下面是打包过后的目录

运行效果

今天就到这里吧，，根据自己的理解说的，如果有哪里错了，，请及时指正，或者补充，我也在学习阶段！

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

posted on 2022-05-06 22:24 前端歌谣阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

导航

“约见”面试官系列之常见面试题之第八十一篇之webpack（建议收藏）