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>