一 、webpack學習環境准備：
1：window系統
2：安裝node.js 官方網址
下載好后下一步下一步安裝即可
安裝步驟略過.......
3：nrm的安裝
打開cmd命令控制台 輸入：npm i nrm -g （全局安裝nrm包）
安裝好后使用 nrm ls 查看
使用nrm use 鏡像地址名稱
注意：nrm只是提供了幾個常用的下載包的URL地址。最終的裝包工具還是npm或者cnpm工具，比如后面安裝webpack包：cnpm install -g webpack 就會從nrm中帶* 的地址中去下載。
4:安裝cnpm 安裝包工具（以安裝webpack或者webpack-dev-server 我都使用cnpm來安裝不適用npm安裝）
執行命令：npm i cnpm -g （全局安裝）
二、webpack 簡單介紹
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。
中文官網：https://webpack.css88.com/
webpack 安裝
執行 cnpm install -g webpack 命令全局安裝
執行 npm install --save-dev webpack-cli
執行 webpack -v 查看版本號（說明安裝成功了。）
三、結合簡單案例
開發工具為 Visual Studio Code
案例初始目錄結：根目錄 webpack 里面有dist 和src兩個文件夾 src文件夾里創建一個html和js文件
index.html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack-demo</title> <!-- <script src="./index.js"></script> --> <!-- 在這里我們就不再直接引用main.js文件了 --> <script src='../dist/bundle.js'></script> </head> <body> <ul> <li>這是第1個li</li> <li>這是第2個li</li> <li>這是第3個li</li> <li>這是第4個li</li> <li>這是第5個li</li> <li>這是第6個li</li> <li>這是第7個li</li> <li>這是第8個li</li> <li>這是第9個li</li> <li>這是第10個li</li> <li>這是第11個li</li> <li>這是第12個li</li> <li>這是第13個li</li> <li>這是第14個li</li> <li>這是第15個li</li> <li>這是第16個li</li> <li>這是第17個li</li> <li>這是第18個li</li> <li>這是第19個li</li> <li>這是第20個li</li> </ul> </body> </html>
main.js代碼
// 導入jQuery ES6語法 import $ from 'jquery' $(function () { // 頁面li各行變色 $('li:odd').css('backgroundColor', 'blue'); $('li:even').css('backgroundColor', function () { return '#' + 'D97634' }); });
這時候運行會報語法錯誤
因為ES6的語法瀏覽器解析不了所以報錯。
這時候改用到webpack上場了...................................
1:初始化一下項目執行：npm init -y
這時候項目中就會多一個package.json文件
2：以上代碼中需要用到jquery所以要在控制台中安裝jQuery 執行：npm i jquery -S
這時候項目中會創建一個node_modules文件夾，這里就是一些js文件
執行webpack命令
.\src\index.js：要執行的文件路徑
.\dist\bundle.js：執行完成后存放的路徑
這時候dist文件家中就會多個bundle.js文件
這時候在預覽html就可以看到效果了。。。。
如果js中代碼修改了，就要手動在此執行打包命令才會生效。
注意如果上面安裝或者打包出現錯誤了參考一下：webpack打包The 'mode' option has not been set,錯誤提示
四、webpack執行命令打包命令配置
在項目根目錄中創建一個webpack.config.js文件
內容如下：
const path =require('path')
// 通過Node模塊操作，向外面暴露一個配置對象
module.exports={
entry:path.join(__dirname,'./src/main.js'),// 打包文件
output:{
path:path.join(__dirname,'./dist'),// 打包好的文件存放地址
filename:'bundle.js' // 打包好文件的文件名
},
mode: 'development' // 設置mode
}
以后在執行大包命令就沒那么反鎖了： webpack .\src\index.js .\dist\bundle.js 直接輸入 webpack就完成打包了。
五、webpack-dev-server 自動打包編譯
六、webpack-dev-server常用命令
--open:當在命令行執行 npm run dev 自動開啟網頁
--port 9000 修改訪問端口號
--contentBase src ：托管的根目錄
--hot ：熱啟動 ,不會立即跟新，而是以打補丁方式只打包修改部分的代碼。
七、html-webpack-plugin插件 訪問內存中的網頁
1：在項目中執行：cnpm i html-webpack-plugin -D
2: 在webpack.config.js中導入
// 導入在內存中生成HTML的插件,只要是插件都要放到plugins節點中。
const htmlWebpackFlugin=require('html-webpack-plugin')
3：在webpack.config.js配置文件的plugins節點中加入插件
// 配置插件節點
plugins:[
最后執行 npm run dev
查看網頁源代碼。
八、style-loader css-loader 加載非JS文件
建一個css樣式文件去掉li前面的點 index.css
ul li{
1：安裝 style-loader css-loader這兩個第三方插件
cnpm i style-loader css-loader -D
2：在js中這樣引用，import './css/index.css'
3：在webpack.config.js配置文件中加入：
測試重啟webpack ：npm run dev 發現li前面的樣式不見了。
九、處理less less 。。。。和上面的步驟一樣，網上搜索處理文件的loader第三方包，然后配置規則
main.js 導入文件
css:import '路徑+樣式名稱.css'
less:import '路徑+樣式名稱.less'
sass:import '路徑+樣式名稱.less'
在項目中導入loader
css：cnpm i style-loader css-loader -D
less: cnpm i less-loader less -D
sass: cnpm i less-loader sass-D
在webpack.config.js配置文件module節點的rules匹配規則中加入：
css：{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置處理.css文件的第三方loader規則
less: { test:/\.less$/,use: [ 'style-loader' , 'css-loader' , 'less-loader' ] },// 配置處理less文件loader規則
scss: { test:/\.scss$/,use: [ 'style-loader' , 'css-loader' , 'sass-loader' ] },// 配置處理less文件sass規則