webpack使用來打包前端代碼
使用webpack打包js文件(隔行變色案例)
1.webpack安裝的兩種方式
- 運行
npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 - 在項目根目錄中運行
npm i webpack --save-dev安裝到項目依賴中
2.初步使用webpack打包構建列表隔行變色案例
項目結構:javascript
- 運行
npm init -y初始化項目，使用npm管理項目中的依賴包 - 建立項目基本的目錄結構
- 使用
npm i jquery -s安裝jquery類庫 - 建立
main.js並書寫隔行變色的代碼邏輯：
// 導入jquery類庫
import $ from 'jquery'
$(function () {
// 設置奇數行背景色
$('li:odd').css('background-color','lightblue')
// 設置偶數行背景色，索引從0開始，0是偶數
$('li:even').css('background-color',function () {
return '#'+'F15A24'
})
})
- 直接在頁面上引用
main.js會報錯，由於瀏覽器不認識import這種高級的JS語法，須要使用webpack進行處理，webpack默認會把這種高級的語法轉換爲低級的瀏覽器能識別的語法； - 運行
webpack 入口文件路徑 輸出文件路徑對main.js進行處理：
webpack src/js/main.js -o dist/bundle.js
注意若是提示沒有webpack-cli,安裝:css
npm install webpack-cli -g
index.html:html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推薦在這裏引入任何包和css文件-->
<!--因爲es6語法瀏覽器不識別 會報錯-->
<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>
</ul>
</body>
</html>
3.使用webpack的配置文件簡化打包時候的命令
項目結構:java
- 在項目根目錄中建立
webpack.config.js - 因爲運行webpack命令的時候，webpack須要指定入口文件和輸出文件的路徑，因此，咱們須要在
webpack.config.js中配置這兩個路徑： - 命令:
webpack
// 導入處理路徑的模塊
var path = require('path');
// 導出一個配置對象，未來webpack在啓動的時候，會默認來查找webpack.config.js，並讀取這個文件中導出的配置對象，來進行打包處理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
output: { // 配置輸出選項
path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
}
}
4.實現webpack的實時打包構建
- 因爲每次從新修改代碼以後，都須要手動運行webpack打包的命令，比較麻煩，因此使用
webpack-dev-server來實現代碼實時打包編譯，當修改代碼以後，會自動進行打包構建。 - 運行
cnpm i webpack-dev-server --save-dev安裝到開發依賴或者npm i wepack-dev-server -D - 安裝完成以後，在命令行直接運行
webpack-dev-server來進行打包，發現報錯，此時須要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現能夠進行實時打包，可是dist目錄下並無生成bundle.js文件，這是由於webpack-dev-server將打包好的文件放在了內存中
- 把
bundle.js放在內存中的好處是：因爲須要實時打包編譯，因此放在內存中速度會很是快 - 這個時候訪問webpack-dev-server啓動的
http://localhost:8080/網站，發現是一個文件夾的面板，須要點擊到src目錄下，才能打開咱們的index首頁，此時引用不到bundle.js文件，須要修改index.html中script的src屬性爲:<script src="../bundle.js"></script> - 爲了能在訪問
http://localhost:8080/的時候直接訪問到index首頁，可使用--contentBase src指令來修改dev指令，指定啓動的根目錄：
"dev": "webpack-dev-server --contentBase src"
同時修改index頁面中script的src屬性爲<script src="bundle.js"></script>node
這時的index.html:jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推薦在這裏引入任何包和css文件-->
<!--因爲es6語法瀏覽器不識別 會報錯-->
<!--<script src="../dist/bundle.js"></script>-->
<!-- /bundle.js放在了內存中,實際看不到 是在根目錄下-->
<script src="/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>
</ul>
</body>
</html>
經常使用命令:webpack
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open表示自動打開 --port 3000 端口3000 --contentBase src根路徑 --hot 熱啓動 不須要手動刷新頁面 自動重載
package.json:es6
{
"name": "WEBPACK-STUDY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"webpack": "^4.25.1"
},
"devDependencies": {
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
第二種配置方法:web
更改dev:
"dev": "webpack-dev-server "
修改webpack.config.js,以下:
const path = require('path');
// 啓用熱更新的 第2步
const webpack = require('webpack')
//導入插件
// 這個配置文件，起始就是一個 JS 文件，經過 Node 中的模塊操做，向外暴露了一個 配置對象
module.exports = {
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪一個文件
output: { // 輸出文件相關的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪一個目錄中去
filename: 'bundle.js' // 這是指定 輸出的文件的名稱
},
//配置dev-server第二種形式
devServer: {
open: true,//自動打開瀏覽器
port:3000,//啓動時候的端口
contentBase:'src',//指定託管的根目錄
hot:true //啓用熱更新
},
plugins:[
//第三步
new webpack.HotModuleReplacementPlugin() //new一個熱更新的模塊
]
}
5.使用html-webpack-plugin插件配置啓動頁面
因爲使用--contentBase指令的過程比較繁瑣，須要指定啓動的目錄，同時還須要修改index.html中script標籤的src屬性，因此推薦你們使用html-webpack-plugin插件配置啓動頁面.npm
- 運行
cnpm i html-webpack-plugin --save-dev安裝到開發依賴npm i html-webpack-plugin -D - 修改
webpack.config.js配置文件以下：
// 導入處理路徑的模塊
var path = require('path');
// 導入在內存中生成 HTML 頁面的 插件
// 只要是插件，都必定要 放到 plugins 節點中去
// 這個插件的兩個做用：
// 1. 自動在內存中根據指定頁面生成一個內存的頁面
// 2. 自動，把打包好的 bundle.js 追加到頁面中去
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
output: { // 配置輸出選項
path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
filename: 'bundle.js' // 配置輸出的文件名
},
plugins:[ // 添加plugins節點配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路徑
filename:'index.html'//自動生成的HTML文件的名稱
})
]
}
- 修改
package.json中script節點中的dev指令以下：
"dev": "webpack-dev-server"
- 將index.html中script標籤註釋掉，由於
html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！
實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號
注意：熱更新在JS中表現的不明顯，能夠從一下子要講到的CSS身上進行介紹說明！
方式1：
- 修改
package.json的script節點以下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號爲4321，--hot表示啓用瀏覽器熱更新：
"dev": "webpack-dev-server --hot --port 4321 --open"
方式2：
- 修改
webpack.config.js文件，新增devServer節點以下：
devServer:{
hot:true,
open:true,
port:4321
}
- 在頭部引入
webpack模塊：
var webpack = require('webpack');
- 在
plugins節點下新增：
new webpack.HotModuleReplacementPlugin()
使用webpack打包css文件
運行
cnpm i style-loader css-loader --save-devmain.js引入:
//import *** from *** 是es6中導入模塊的方式 import $ from 'jquery' //webpack只能打包處理js類型文件,沒法處理非js類型的文件 //若是要處理非js的文件 須要手動安裝第三方的加載器 //須要安裝style-loader css-loader import './css/index.css' $(function () { $('li:odd').css('background-color','yellow'); $('li:even').css('background-color',function () { return '#'+'F15A24' }) })修改
webpack.config.js這個配置文件：const path = require('path'); // 啓用熱更新的 第2步 const webpack = require('webpack') //導入html插件 //只要是插件,都必定要放到plugins節點中去 const htmlWebpackPlugin = require('html-webpack-plugin') // 這個配置文件，起始就是一個 JS 文件，經過 Node 中的模塊操做，向外暴露了一個 配置對象 module.exports = { entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪一個文件 output: { // 輸出文件相關的配置 path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪一個目錄中去 filename: 'bundle.js' // 這是指定 輸出的文件的名稱 }, //配置dev-server第二種形式 devServer: { open: true,//自動打開瀏覽器 port:3000,//啓動時候的端口 contentBase:'src',//指定託管的根目錄 hot:true //啓用熱更新 }, plugins:[ //第三步 new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊 new htmlWebpackPlugin({//建立一個在內存中生成html頁面插件 template:path.join(__dirname,'./src/index.html'), filename:'index.html' //指定生成頁面的名稱 }) ], module:{//這個是第三方的加載器 rules:[//正則的文件匹配規則 {test:/\.css$/,use:['style-loader','css-loader']} ] } }
module: { // 用來配置第三方loader模塊的
rules: [ // 文件的匹配規則
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
]
}
- 注意：
use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從後向前調用的；
使用webpack打包less文件
- 運行
cnpm i less-loader less -D - 修改
webpack.config.js這個配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 運行
cnpm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加處理sass文件的loader模塊：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack處理css中的路徑
- 運行
cnpm i url-loader file-loader --save-dev - 在
webpack.config.js中添加處理url路徑的loader模塊：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
- 能夠經過
limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片纔會進行base64編碼：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel處理高級JS語法
- 運行
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包 - 運行
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法 - 在
webpack.config.js中添加相關loader模塊，其中須要注意的是，必定要把node_modules文件夾添加到排除項：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- 在項目根目錄中添加
.babelrc文件，並修改這個配置文件以下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
- 注意：語法插件
babel-preset-es2015能夠更新爲babel-preset-env，它包含了全部的ES相關的語法；
相關文章
- 1. webpack打包nodejs項目（前端代碼）
- 2. 使用grunt打包前端代碼
- 3. 前端工具的使用-----webpack打包
- 4. grunt 打包前端代碼
- 5. Webpack 服務器端代碼打包
- 6. webpack前端打包工具
- 7. Webpack前端打包工具
- 8. 前端代碼打包優化
- 9. nodejs-gulp 打包前端項目代碼
- 10. app前端代碼打包步驟
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Eclipse 代碼模板 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webpack打包nodejs項目（前端代碼）
- 2. 使用grunt打包前端代碼
- 3. 前端工具的使用-----webpack打包
- 4. grunt 打包前端代碼
- 5. Webpack 服務器端代碼打包
- 6. webpack前端打包工具
- 7. Webpack前端打包工具
- 8. 前端代碼打包優化
- 9. nodejs-gulp 打包前端項目代碼
- 10. app前端代碼打包步驟