使用webpack手動創建一個完整項目的全過程

1.創建文件夾"webpack-study"

2.使用webstrom打開文件夾所在位置。在根目錄上創建一個文件，文件命名為“src”,在src文件下新建css、images、js文件夾，在src文件夾下新建index.html文件和main.js文件

3.現在我們需要完成一個隔行變色的需求，來熟悉webpack的使用過程。在index.html文件下添加6個li

<code>
1

2

3

4

5

6
/<code>

4.我準備使用jquery來完成隔行變色.首先初始化webpack，在終端輸入

<code>cnpm init -y/<code>

在根目錄下會生成一個package.json的文件，裡面是相應的配置信息

5.通過webpack來安裝jquery。在終端輸入

<code>cnpm i jquery -S/<code>

jQuery安裝成功信息

成功之後，根目錄下會生成一個“node_modules”的文件夾

6.在“main.js”中通過import $ from 'jquery'來導入模塊

導入模板

7.在index.html中引入main.js文件，寫的效果在瀏覽器中並沒有生效。import語法太高級，瀏覽器沒辦法識別。這個時候我們就必須通過webpack處理一下，打包出來一個文件。在終端中輸入

<code>webpack ./src/main.js -o ./dist/bundle.js/<code>

打包

文件夾中也生成出來dist文件夾和bundle.js文件

但是終端報了一個警告

警號內容

黃色部分的警告的意思是,沒有設置模式,有開發模式和生產模式兩種,接下來,找到package.json.添加上"dev"和"build"這兩個信息以及他們的值.

<code>"script":{
          "test":"echo"Error:no test specified" && exit 1",  
          "dev":"webpack -- mode development",
          "build": "webpack --mode production"

} /<code>

在根目錄上新建“webpack-config.js”文件

問題得到解決

8.index.html引入bundle.js文件，瀏覽器效果顯示正常。

通過這個小栗子我們能發現webpack能夠解決js文件之間相互的依賴關係 ；還能夠處理js的兼容問題，把高級的、瀏覽器不識別的語法轉為低級的、瀏覽器能正常識別的語法。

9.修改main.js中li奇數行背景色，我們想在瀏覽器上看修改之後的效果，是否一直需要在終端中輸入

<code>webpack .\src\main.js -o .\dist\bundle.js/<code>

我們能否直接輸入“webpack”就能達到我們想要的效果呢？

10.在終端中輸入"webpack"

終端提示信息

彈出提示是否安裝“webpack-cli”，輸入“no”之後，自己在終端

<code>cnpm install webpack-cli -g/<code>

安裝成功之後，在終端輸入“webpack”依然彈出上面的提示。

11.在終端輸入

<code>cnpm install webpack -d
cnpm install webpack-cli -d/<code>

然後在終端輸入webpack成功。

12.在根目錄下新建“webpack.config.js”配置文件,由於運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在`webpack.config.js`中配置這兩個路徑：

配置內容

使用“webpack-dev-server”這個工具，來實現自動打包編譯的功能

1.終端運行

<code>cnpm i webpack-dev-server -D/<code>

把這個工具安裝到項目的本地開發依賴。

2.安裝完畢後，這個工具的用法，和webpack命令的用法完全一樣。

3.由於我們是在項目中安裝的webpack-dev-server，所以無法把它當做腳本命令，在終端中直接運行。只有那些安裝到全局-g的工具，才能運行。

4.在package.json中添加“dev”:"webpack-dev-server"

5.注意：webpack-dev-server這個工具，如果想要正常運行，要求本地項目中，必須安裝webpack

6.webpack-dev-server幫我們打包生成的bundle.js文件，並沒有存放在實際的物理磁盤上，而是直接託管到了電腦內存中（好處：由於需要實時打包編譯，所以放在內存中速度會非常快）

修改index頁面中script的src屬性為` `

7.把html也放在電腦內存中 “cnpm i html-webpack-plugin -D”安裝到開發依賴

修改`webpack.config.js`配置文件如下：

<code>// 導入處理路徑的模塊
var path = require('path');
// 導入自動生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: path.join(__dirname, 'src/js/main.js'), // 項目入口文件
output: { // 配置輸出選項
path: path.join(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
},
plugins:[ // 添加plugins節點配置插件
new htmlWebpackPlugin({
template:path.join(__dirname, 'src/index.html'),//模板路徑
filename:'index.html'//自動生成的HTML文件的名稱
})
]
}/<code>

將index.html中script標籤註釋掉，因為`html-webpack-plugin`插件會自動把bundle.js注入到index.html頁面中！

實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

方式1：+ 修改`package.json`的script節點如下，其中：

<code>"dev": "webpack-dev-server --hot --port 4321 --open"  
//--open表示自動打開瀏覽器，
//--port 4321  表示打開的端口號為4321，
//--hot表示啟用瀏覽器熱更新/<code> 

webpack默認只能打包處理JS類型的文件，無法處理其他非JS類型的文件；如果非要處理非JS類型的文件，我們需要手動安裝一些合適第三方loader加載器

因為傳統的link加載css樣式會發起二次請求，所以我們需要在webpack中使用loader加載css樣式

如果想要打包處理css文件，需要安裝

<code>cnpm i style-loader css-loader -D/<code>

修改`webpack.config.js`這個配置文件：

<code>module: { // 用來配置第三方loader模塊的
  rules: [ // 文件的匹配規則
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
  ]
}/<code>

3. 注意：`use`表示使用哪些模塊來處理`test`所匹配到的文件；`use`中相關loader模塊的調用順序是從後向前調用的；

使用webpack打包less文件

1. 在終端運行

<code>cnpm i less-loader less -D/<code>

2. 修改`webpack.config.js`這個配置文件：

<code>`cnpm i sass-loader node-sass --save-dev`/<code>

使用webpack打包sass文件

1. 在終端運行

<code>{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }/<code> 

2. 在`webpack.config.js`中添加處理sass文件的loader模塊：

<code>{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }/<code>

使用webpack處理css中的路徑

1. 在終端運行

<code>cnpm i url-loader file-loader --save-dev/<code>

2. 在`webpack.config.js`中添加處理url路徑的loader模塊：

<code>{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }/<code>

3. 可以通過`limit`指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片才會進行base64編碼：limit的數值大於等於圖片的字節,圖片才會進行base64編碼

<code>{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },/<code>

安裝時一直報錯

錯誤信息

解決辦法：

<code>“/<code>

完美解決

默認webpack無法打包.vue文件，需要安裝相關的loader

<code>"cnpm i vue-loader vue-template-compiler -D"/<code>

在配置文件中新增loader配置項

<code>{test:/\.vue$/,use:'vue-loader'}/<code>

啟動項目報錯

報錯信息

解決方法：Vue Loader v15 現在需要配合一個 webpack 插件才能正確使用，在webpack.config.js添加以下的代碼，即可

<code>webpack.config.jsconst VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

module.exports = {
  
plugins: [
  new VueLoaderPlugin()
]

}/<code>