從我進公司那天起，公司就一直在用webpack，這是一個前端自動打包工具，但我以前從來沒接觸過，不過幸好我聰明機智，天賦異稟，倒是能上手用，只不過有些配置還是看不懂，于是，我就趁著項目空閑時間好好研究了一下webpack這個打包工具，下面我說一下對webpack的個人理解：

首先，我覺得webpack總得來說是一個js打包工具，它的思想是模塊化思想，一切都可以成為模塊，不管你是js，css，還是scss，less，還是jsx，webpack統(tǒng)統(tǒng)都能打包，它有一個入口（多頁面應(yīng)用還沒研究，，等研究了再發(fā)上來），所有的要打包的文件，都要通過這個入口進來，然后再配置一個出口，就ok了，其中要好多配置，我在這里寫了一個簡單的例子，先看我的結(jié)構(gòu)

首先你要初始化一個package.json，在這之前你要下載安裝一個node.js，因為這里所有的一切都是基于node.js的

npm init

• 1

然后一直回車，就能出來這個文件了

webpack三大組成構(gòu)件，是package.json, webpack.config.js, server.js

package.json是下載項目需要的依賴包，webpack.config.js是配置webpack的打包文件的配置，server.js是利用webpack自帶的服務(wù)器在自己電腦上起一個服務(wù)

下面是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的語言轉(zhuǎn)化為瀏覽器能識別的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，這個插件是規(guī)定html的入口以及出口路徑，以及script中要引用的文件 HotModuleReplacementPlugin這個插件屬于熱插拔插件，就是只要項目中任何地方，有改動，瀏覽器就會動態(tài)刷新，自動查看效果，不用手動刷新了 webpack.optimize.CommonsChunkPlugin，這個插件是將引入的依賴的框架代碼統(tǒng)統(tǒng)整合到這個js文件里面，自己寫的文件在自己的main里面 copyWebpackPlugin，這個插件是純復(fù)制的一個插件，把一個文件夾從某一路徑原封不動的復(fù)制到指定路徑，沒什么好說的，可以自行百度

下面來個整體的配置

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,在自己的本地起一個服務(wù)

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"} }

下面是打包過后的目錄

運行效果

今天就到這里吧，，根據(jù)自己的理解說的，如果有哪里錯了，，請及時指正，或者補充，我也在學(xué)習(xí)階段！

本面試題為前端常考面試題，后續(xù)有機會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十一篇之webpack（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。