webpack是一種JavaScript應(yīng)用模塊化打包工具，它配置起來簡單易上手，因此很多企業(yè)工程化代碼都使用它來打包。在具體介紹如何使用webpack之前，先來介紹下webpack的四個核心概念。

Entry

Entry是webpack的入口，簡單來講，你可以想象成webpack會為JavaScript應(yīng)用的依賴關(guān)系維護(hù)一個復(fù)雜的圖，而entry則是這個圖的入口，它會告訴webpack從哪里開始打包你的項(xiàng)目，并且打包什么（where and what）。?
Entry在webpack的配置文件中通過entry屬性定義，一個最簡單的定義如下：

module.exports = {entry: __dirname+'/index.js' };

　　

__dirname是項(xiàng)目的根目錄

Output

通過entry你已經(jīng)可以開始打包模塊化的JavaScript項(xiàng)目，但是webpack還不知道如何打包，例如打包出來的文件如何命名，打包出來的文件放在哪里等等。?
上述問題都通過webpack配置文件的output屬性來定義，其語法如下

module.exports = {entry: __dirname+'/index.js',output: {path: __dirname+'/dist',filename: 'bundle.js'} };

　　

webpack在即將開始打包的時候讀取上面的配置文件，從根目錄下的index.js開始打包，打包出來的文件命名為bundle.js，并將其放在根目錄的dist文件夾里。

Loaders

webpack會將JavaScript項(xiàng)目里的文件全部視為模塊（module），但是webpack自身只能識別js，因此不同的文件(.css, .html, .styl, .jpeg, etc.)需要不同的解析器。Loaders在webpack中的作用就是將JavaScript項(xiàng)目中的不同文件解析成模塊，以便于不同文件能夠在項(xiàng)目中統(tǒng)一處理。?
loaders在webpack配置文件中語法規(guī)則如下：

const config = {entry: __dirname+'/index.js',output: {path: __dirname+'/dist',filename: 'bundle.js'},module: {rules: [{test: /\.css$/, use: 'css-loader'}]} };module.exports = config;

　　

在上面的配置文件中我們定義了rules屬性，它有兩個子屬性.test和.use。值得一提的是，當(dāng)你定義rules的時候，必須定義在module.rules下面而非直接定義rules，否則webpack的語法檢查會報錯。?
新增的rules規(guī)則告訴了編譯程序，當(dāng)碰到以.css結(jié)尾的文件并且是通過require或者import引入的時候，首先使用css-loader對文件進(jìn)行解析，之后將解析完成的文件視為標(biāo)準(zhǔn)化模塊統(tǒng)一處理。

• *-loader需要先安裝才可使用
• 此處loaders語法規(guī)則為webpack2.+的語法規(guī)則，老版本的語法規(guī)則不同。

Plugins

配置了以上三個屬性之后，webpack已經(jīng)可以對簡單項(xiàng)目進(jìn)行正常打包了。但是對于打包過程中的不同需求，webpack提供了Plugins功能，它可以滿足很多個性化需求。例如，我想要對webpack打包的文件進(jìn)行壓縮，那么可以引入具有壓縮功能的插件，代碼如下。

onst webpack = require('webpack'); const config = {entry: __dirname+'/index.js',output: {path: __dirname+'/dist',filename: 'bundle.js'},module: {rules: [{test: /\.css$/, use: 'css-loader'}]},plugins: [new webpack.optimize.UglifyJsPlugin() ] };module.exports = config;

　　為了使用相應(yīng)的插件，我們需要現(xiàn)將插件進(jìn)行require，由于壓縮是webpack內(nèi)部的插件因此直接require就可以，如果是一些第三方插件，需要先安裝，安裝之后再通過require引入。

轉(zhuǎn)載于:https://www.cnblogs.com/caonima-666/p/7054002.html

總結(jié)

以上是生活随笔為你收集整理的webpack2入门概念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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