428 webpack 使用步驟
webpack 使用步驟
1、webpack 第一階段
命名初始化階段
項目名不能有漢字，不能取名叫 webpackjavascript
一、建立項目名稱，並生成 package.json， 命令 : npm init -ycss
二、安裝 : npm i -D webpack webpack-clihtml
webpack : 是 webpack 工具的核心包 webpack-cli : 提供了一些在終端中使用的命令 -D(--save-dev) : 表示項目開發期間的依賴，也就是 : 線上代碼中用不到這些包了
三、建立一個main.js文件java
console.log('我就要被打包了，哦也');
四、在 package.json的scripts中，添加腳本node
// webpack 是 webpack-cli 中提供的命令， 用來實現打包的
// ./main.js 入口文件，要打包哪一個文件
"scripts": {
// 原來的 "test": "..."，這行代碼能夠刪除
"build": "webpack main.js"
}，
五、運行 : npm run buildjquery
六、設置開發狀態 : modewebpack
"build" : "webpack ./main.js --mode development" // WARNING in configuration // The 'mode' option has not been set， webpack will fallback to 'production' for this value. // 若是沒有設置 mode 配置項， webpack 會默認提供 開發環境(production) // Set 'mode' option to 'development' or 'production' to enable defaults for each environment. // 項目開發的兩種環境 1. 開發環境 (development) : 開發過程就是開發環境 2. 生產環境 (production) : 線上環境，也就是 : 項目作好了，發佈上線 生產環境下，打包生產的js文件都是壓縮後的，開發環境下代碼通常是不壓縮的
隔行變色案例
- 建立
src/index.html - 隔行案例 =>
html => ul#list>li{我是 li \$}\*10 - 安裝 juqery :
npm i jquery， 而且引入jquery - 暫時引入
main.js， 在 main.js 裏寫入
// 使用ES6的模塊化語法
import $ from 'jquery' // 優勢 不用沿着路徑去找
$('#list > li:odd').css('backgroundColor'， 'red')
$('#list > li:even').css('backgroundColor'， 'green')
// 語法報錯
- 問題
// 引入 main.js 會報錯，由於瀏覽器不支持這個import 的Es6語法 // npm run build 以後 // 引入 dist/main.js 後會ok，由於webpack 幫咱們轉化爲瀏覽器可以識別的es5語法了
- 歷程 :
//1. 若是index.html 中引入 jquery， 再引入 mian.js (沒有引入jquery了) => ok //2. 若是index.html 中沒有引入 jquery ， 直接使用es6的模塊化語法 import ， 引入main.js就會報錯 //3. 若是index.html 中沒有引入 jquery ， 直接使用es6的模塊化語法 import ， webapck打包出 dist/main.js 引入 dist/main.js ==> ok
- 爲何
dist文件下的main.js文件裏的代碼忽然這麼多
看圖 (打包流程)es6
- code 記得保存一份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>春春 1 號</li>
<li>春春 2 號</li>
<li>春春 3 號</li>
<li>春春 4 號</li>
<li>春春 5 號</li>
<li>春春 6 號</li>
<li>春春 7 號</li>
<li>春春 8 號</li>
<li>春春 9 號</li>
<li>春春 10 號</li>
</ul>
<!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- 打包後，原來的main.js就不能用了，要用打包後的dist/main.js -->
<!-- <script src="main.js"></script> -->
<script src="../dist/main.js"></script>
</body>
</html>
main.jsweb
console.log('我就要被打包了,哦也');
import $ from 'jquery'
$('li:odd').css('color', 'red')
$('li:even').css('color', 'blue')
package.jsonnpm
"scripts": {
"build": "webpack ./src/main.js --mode development",
"build1": "webpack main.js --mode development"
}
2、webpack 第二階段
webpack 配置文件
一、準備工做
src源文件 : index.html 和 main.js
二、webpack 打包的兩種方式
1-命令行
2-配置項
三、方式 1 : 命令行
* "build" : "webpack ./mian.js --mode development" * npm run build * 通常狀況下 : 改成 * "build" : 入口 --output 出口 * "build": "webpack ./src/js/main.js --output ./dist/bundle.js --mode development"， * * 驗證 : index.html 引入 bundle.js
四、方式 2 : 配置項
第一步 : 項目`根目錄`下， 建立一個 `webpack.config.js`文件 (文件名固定)
專門指定其餘文件 : --config webpack.XX.js
第二步 : 在 `webpack.config.js` 中，進行配置
// webpack 是基於 node的 ， 因此配置文件符合 node 方式書寫配置
// 注意 : 不要再這個文件中使用ES6的模塊化 import語法， main.js裏可使用，是由於要經過webpack轉化爲es5的，而這個是webpack 的配置文件，它是要轉化別人的，因此必需要經過
第三步 : 修改 `package.json` 中的 `scripts` ， 腳本命令爲： "build": "webpack"
第四步 : 執行命令 : `npm run build`
// 當webpack.config.js修改後，使用nodemon自動監聽該文件變化，自動從新執行npm run XXX，不用手動執行 【https://www.jianshu.com/p/7571a866a047】
"scripts": {
"dev": "webpack-dev-server",
"startdev": "nodemon --watch webpack.config.js --exec npm run dev "
}
五、示例代碼(webpack.config.js)
const path = require('path')
module.exports = {
// 入口
entry: path.join(__dirname， './src/js/main.js')，
// 出口
output: {
// 出口目錄
path: path.join(__dirname， './dist')，
filename: 'bundle.js'
}，
// 開發模式
mode: 'development'
}
webpack 配置文件 html-webpack-plugin
- html-webpack-plugin 必備的插件
做用 : 1. 可以根據指定的模板文件 (index.html)，自動生成一個新的 index.html，而且注入到dist文件夾下 2. 可以自動引入js文件 【即出口文件。】
- 安裝 :
npm i html-webpack-plugin - 配置 :
第一步: 引入模塊
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [
// 使用插件 指定模板
new htmlWebpackPlugin({
template: path.join(__dirname， './src/index.html')
})
]
webpack 配置文件 ：webpack-dev-server
- webpack-dev-server 使用 webpack 必備的功能(插件)
做用 : 爲使用 webpack 打包提供一個服務器環境
【使用webpack-dev-server，是要打一個虛擬的包到服務器裏，因此使用webpack-dev-server，package.json中就不能使用 "build": "webpack" 了，由於那樣的話，仍是會每次更改文件後，都須要手動打一個實體的包去dist裏。】
- 1.1 自動爲咱們的項目建立一個服務器
- 1.2 自動打開瀏覽器
- 1.3 自動監視文件變化，自動刷新瀏覽器...
- 使用步驟 :
-
2.1 安裝 :
npm i -D webpack-dev-server -
2.2 兩種使用方式:
1-命令行
2-配置文件(推薦)
- 方式 1 : 命令行配置
- 腳本 :
"dev" : "webpack-dev-server" - 運行到
npm run dev - 查看路徑 : "http://localhost:8080/"
- ｢wds｣: Project is running at http://localhost:8080/
- 問題 1 : 自動打開?
- 解決 : 添加
--open - 問題 2 : 指定端口號
- 解決 : 添加
--port 3001 - 問題 3 : 熱更新
- 解決 :
--hot( 整個頁面和整個項目打包 )
演示: 在瀏覽器調試樣式的地方去掉ul的樣式 /* background: skyblue; */ 而後分別看 加 --hot 和 不加 --hot 的區別 從新運行腳本
- 方式 2 : 配置文件配置
// hot 不要寫在配置文件裏面，，否則的話還要配其餘插件麻煩
"dev" : "webpack-dev-server --hot"，
devServer : {
open : true，
port : 3001
}
3、webpack 第三階段 打包上線
- 開發模式 :
npm run dev==> 不會打包的 ，只會把項目放到服務器裏 - 假設項目開發完成了，要上線，怎麼操做?
2.1 執行 : `npm run build` 對項目進行打包，生成dist文件 2.2 模擬本地服務器 : 安裝 : `npm i -g http-server` 2.3 把dist文件裏的內容放到服務器裏便可， 直接運行`http-server` 【切換到dist文件夾目錄。】
> 開發階段 : - 腳本 dev : `npm run dev` - 工具 : `webpack-dev-server` > 發佈上線 : - 腳本 build : `npm run build` - 工具 : `webpack` > http-server 模擬開啓一個虛擬服務器，託管咱們的文件 > 1. 安裝 : npm i http-server -g > 2. 使用 : http-server
4、webpack 第四階段 ： 打包非js文件
webpack 只能處理 js 文件，非 js（css、less、圖片、字體等）處理處理不了， 藉助 loader 加載器
處理 css 文件
-
建立一個 css 文件， 而後在
main.js中引入import '../css/index.css';ul { style-list : none }
-
安裝 :
npm i -D style-loader css-loader -
在
webpack.config.js中，添加個新的配置項module -
在
module中添加loader來處理css
// loader
module: {
rules: [
// 1.處理 css
// 注意點 use執行loader 順序 從右往左
// css-loader : 讀取css文件內容，將其轉化爲一個模塊
// style-loader : 拿到模塊， 建立style標籤, 把模塊內容加載進來, 插入到頁面中
{ test: /\.css$/， use: ['style-loader'， 'css-loader'] }
]
}
處理 less 文件
- 建立一個 less 文件， 而後再 main.js 中 引入
import '../css/index.less'; - 安裝 :
npm i -D less-loader less style-loader css-loader - 在 webpack.config.js 中， 配置
module->rules - 在 module 中， 添加 loader 來處理
less
ul {
background-color: aqua;
li {
&:hover {
color: yellow;
}
}
}
-
配置 :
{ test: /\.less$/， use : ['style-loader'，'css-loader'，'less-loader'] }
處理 圖片 文件
設置背景圖片
.cls {
width: 300px;
height: 300px;
background: url('../css/4.jpg');
background-size: 100%;
}
-
安裝 :
npm i -D url-loader file-loaderurl-loader (推薦) 和 file-loader 二選一便可 【前者包含並依賴後者。】
-
在 webpack.config.js 添加 loader 規則
// 處理圖片
{ test : /\.(jpg|png)$/， use : ['url-loader'] }，
- url-loader 默認會將圖片轉化爲 base64 編碼格式， 目的: 提升性能
- file-loader 在處理圖片時， 會對文件進行重命名 : 【MD5的方式】
原始： background-image: url(../images/1.jpg); 處理後： background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);
- base64 編碼格式的圖片說明 :
- 精靈圖 : 將一些小圖片合併爲一張圖片，減小請求次數，提升性能
- 字體圖標 : 直接將一些小的圖片，合併到字體文件中，而且不會失真
- base64 : 是一種編碼格式，可以將圖片、文字等常見的文件，轉化爲 base64 格式，這種字符串格式， 瀏覽器可以識別而且讀取顯示到頁面中;
- base64 是一個字符串，也能夠直接被內嵌到頁面中， 或者 css 中
- 注意 : 大圖片不適合用 base64 處理， 只有小的圖標才適合 base64 處理
- 設置配置
方式1 :{ test : /\.(jpg|png)$/， use : ['url-loader?limit=57417'] }
方式2 :
{
test: /\.(jpg|png)$/，
use: [{
loader: 'url-loader'，
options: {
// 比57417這個小 => 轉化爲base64
// 大於等於這個57417值 => 不會轉base64，內部調用 file-loader 加載圖片
limit: 57417
}
}]
}，
// 圖片大小 < limit的值，轉化爲base64，此時用url-loader 【圖片大小：即字節】
// 圖片大小 >= limit的值，不轉base64(仍是直接的路徑=>md5的格式)，此時用file-loader
{ test: /\.(jpg|gif|png)$/, use: ['url-loader?limit=50000'] }
處理 字體 文件
-
準備字體圖標： 字體圖標文件
iconfont或者 從阿里矢量圖標裏下載 -
拷貝到項目中的 css 文件夾中
-
在 main.js 中引入 css 文件
import '../css/iconfont/iconfont.css'
-
使用 :
-
在 webpack.config.js 中配置
// 4. 處理字體圖標
{ test:/\.(svg|woff|woff2|ttf|eot)$/，use:'url-loader'}
處理 ES6 語法
- 如今的項目都是使用 ES6 開發的， 可是這些新的 ES6 語法， 並非全部的瀏覽器都支持， 因此就須要有一個工具，幫咱們轉成 es5 語法， 這個就是: babel
- babel
- Babel is a JavaScript compiler. ==> babel 是一個 JavaScript 編譯器
- webpack 只能處理 import / export 這個 es6 模塊化語法
而其餘的 js 新語法，應該使用 babel 來處理 - 好比 :
var o = { ...obj }在谷歌上能夠，edge 就不能夠 - babel 的使用 :
- 6.1 安裝 1 :
npm i -D babel-core babel-loader@7- babel-core 是 babel 的核心包
- babel-loader 加載 js 文件， 並將 js 代碼內容交給 babel-core 解析爲 es5 低版本的 js
- 6.2 安裝 2 :
npm i -D babel-preset-env babel-preset-stage-2- babel-preset-* 表示可以解析什麼版本的 js 語法
- babel-preset-env : 表示可以解析 es2015，es2016，es2017，es2018 這些標準的語法
- babel-preset-stage-2 : 用來解析常常會遇到，可是尚未被採納爲標準的語法
- 好比 : 'abc'.padStart(10， '6') : 準備 10 位字符，有 abc，前面不夠用 6 補充，是 es2017 的語法，
babel-polyfill與babel-plugin-transform-runtime也是作兼容處理的，之前都是用這個，兼容更早的
- 6.3 配置 : 在 webpack.config.js 中添加一個 loader
{ test: /\.js$/， use: 'babel-loader'， exclude: /node_modules/ }
- 6.4 在項目根目錄中建立 babel 的配置文件，叫：
.babelrc
console.log('我就要被打包了,哦也');
import $ from 'jquery'
import './assets/demo.css'
import './assets/demo.less'
import './assets/iconfont/iconfont.css'
$('li:odd').css('color', 'red')
$('li:even').css('color', 'green')
{
"presets": [
"env",
"stage-2"
],
// -- -- -- -- -- -
// 暫時不用
// 若是將來某一天真的用到了polify
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}]
}
- 6.5 測試 : 谷歌 和 edge
var obj = {
name: 'zs'，
age: 20
}
var o = { ...obj }
console.log(o)
webpack中文連接 : https://www.webpackjs.com/loaders/url-loader
筆記
# 第一個階段
1. npm i webpack webpack-cli -D
安裝包 :
- npm i XXX / npm i XXX -S / npm i XXX --save => 記錄 dependencies (發佈)
- npm i XXX -D / npm i XXX --save-dev => 記錄 devDependencies (開發)
2. 腳本 `"build" : "webpack main.js"`
- 運行 build 腳本 : `npm run build`
3. 警告
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
- `mode` 選項,你沒有設置, webpack 默認給你一個值 `production`
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
- 能夠設置 兩個值 , `development` `production`
- `production` 生產/發佈 (代碼壓縮)
- `development` 開發 (代碼不壓縮)
- 如何設置 mode ?
- 命名行設置選項有個格式 : --key value ==> `--mode production/development`
4. 隔行變色案例
# 第二個階段
## 1. webpack 的配置
- 命名行 + 配置文件
1.1. 命名行
如今 `"build": "webpack ./src/main.js --mode development"`
格式 :
--> "webpack ./src/main.js --mode development"
--> webpack 入口 --output 出口
==> webpack ./src/main.js --output ./dist/app.js
1.2. 配置文件
> 若是 腳本 "build" : "webpack"
> webpack.config.js => webpack 的默認配置文件
## 2. 插件 : html-webpack-plugin
做用 :
1. 根據指定的模板文件 index.html 文件 => 生成一個新的 index.html => 自動注入到 dist 裏面
2. 自動引入 app.js 文件
使用
3. 安裝 : `npm i html-webpack-plugin -D`
4. 引入 `const htmlWebpackPlugin = require('html-webpack-plugin')`
5. 配置一下 :
```js
plugins: [
// 配置 html-webpack-plugin插件
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html')
})
]
```
## 3. 插件 : webpack-dev-server
做用
爲 webpack 打包提供一個服務器環境
1.1 開啓 服務器環境
1.2 自動打開瀏覽器
1.3 自動監聽文件 的變化,自動刷新瀏覽器\
使用
1. 安裝 : `npm i webpack-dev-server -D`
2. 新加一個腳本 :
`"dev" : "webpack-dev-server --open --port 3001"`
3. 運行腳本 : `npm run dev`
4. 配置
- 1. 自動打開瀏覽器
- `--open`
- 2. 指定端口號
- `--port 3001`
- 3. 熱更新 (體如今 css 上)
- `--hot`
5. 能夠把 webpack-dev-server 的幾個配置項放到 配置文件裏去
```js
// webpack-dev-server 的配置信息
devServer: {
open: true,
port: 3002
}
```
# 第三個階段
> 開發階段 :
- 腳本 dev : `npm run dev`
- 工具 : `webpack-dev-server`
> 發佈上線 :
- 腳本 build : `npm run build`
- 工具 : `webpack`
> http-server 模擬開啓一個虛擬服務器 託管咱們的文件
>
> 1. 安裝 : npm i http-server -g
> 2. 使用 : http-server
# 第四個階段 - 處理 非 js (loader)
## 1. 處理 css
0. 建立 assets/demo.css => ul{ list-style:none; }
1. 引入 : main.js 引入 css
- import './assets/demo.css'
1. 安裝 : `npm i style-loader css-loader -D`
1. 配置 :
```js
module: {
rules: [
// 處理 css
// 順序 : 從後往前使用的
// css-loader : 讀取 demo.css 內容 , 放到一個模塊裏
// style-loader : 建立style標籤 ,把模塊內容加載進來,插入到頁面中
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
```
## 2. 處理 less
0. 建立 demo.less
- 引入
1. 安裝 : `npm i less-loader less -D`
> 處理 less 須要三個 loader style-loader css-loader less-loader
2. 配置 :
`{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }`
## 3. 處理圖片
1. 安裝 `npm i url-loader file-loader -D`
2. 配置 :
```js
// 默認 轉化爲base64 可是若是圖片過大, 轉化爲base64 反而影響性能
// 圖片小 => base64
// 圖片過大 =>不要轉化爲base64
{ test : /\.(jpg|gif|png)$/ , use:['url-loader'] }
```
## 4. 處理字體圖標
- 拷貝 iconfont 文件到 assets 裏面
- 引入 `.../iconfont.css`
- 使用 : <i class='iconfont icon-zan'></i>
1. 處理字體圖標用的 loader => `url-loader`
2. 已經安裝好,不須要安裝了,直接使用
3. 配置一下 :
```js
{ test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] }
```
# 5. 處理 es6 的 js
- webpack 可以處理 es6 語法的,可是隻能處理一些 import 等等...
- 有一些 webpack 處理不了 輔助: babel
- babel 是一個 js 的編譯器 es6+ => es5- 的語法
- 舉例 : let o = {...obj}
配置 babel
1. 安裝 1 : `npm i babel-core babel-loader -D`
- babel-core babel 的核心包
- babel-loader 處理 js ,
2. 安裝 2 : `npm i babel-preset-env bable-preset-stage-2 -D`
npm i babel-preset-env babel-preset-stage-2 -D
- babel-preset- \* 解析什麼版本的 js
- -env : 解析標準語法
- stage-2 非標準語法
3. 建立 babel 的配置文件 `.babelrc`
```js
{
"presets" : [
"env","stage-2"
]
}
```
4. 配置
`{ test :/\.js$/,use:['babel-loader'], exclude :/node_module/ }`
# 熱更新
1. 贊 => 改變顏色 => 全局刷新了
2. 熱更新 `--hot` => 局部更新
沒打包的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>春春 1 號</li>
<li>春春 2 號</li>
<li>春春 3 號</li>
<li>春春 4 號</li>
<li>春春 5 號</li>
<li>春春 6 號</li>
<li>春春 7 號</li>
<li>春春 8 號</li>
<li>春春 9 號</li>
<li>春春 10 號</li>
</ul>
<div class="img"></div>
<i class="iconfont icon-zan"></i>
<!-- <script src="../node_modules/jquery/dist/jquery.js"></script> -->
<!-- <script src="./main.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<!-- <script src="../dist/app.js"></script> -->
</body>
</html>
打包後的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>春春 1 號</li>
<li>春春 2 號</li>
<li>春春 3 號</li>
<li>春春 4 號</li>
<li>春春 5 號</li>
<li>春春 6 號</li>
<li>春春 7 號</li>
<li>春春 8 號</li>
<li>春春 9 號</li>
<li>春春 10 號</li>
</ul>
<!-- <script src="../node_modules/jquery/dist/jquery.js"></script> -->
<!-- <script src="./main.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<!-- <script src="../dist/app.js"></script> -->
<script type="text/javascript" src="app.js"></script></body>
</html>
main.js
console.log('春春說,他好爽,要被包了,哦也....')
// 引入 jquery
// const $ = require('jquery')
// 經測試，這種引入也能夠，可是不推薦
// import $ from '../node_modules/jquery/dist/jquery'
// 使用 es6 的引入模塊的語法
// 瀏覽器 不識別 es6 的 import 語法
import $ from 'jquery'
// 引入 css
import './assets/demo.css'
// 引入 less
import './assets/demo.less'
// 引入 字體圖片樣式文件
import './assets/iconfont/iconfont.css'
$('li:odd').css('background', 'blue')
$('li:even').css('background', 'red')
let obj = {
name: '春春',
age: 5
}
let o = {...obj }
console.log(o)
// es6 => 2015年
// es7 => 2016
// es8 => 2017
// es9 => 2018
// es10 => 2019
package.json
{
"name": "webpack-37",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot",
"startdev": "nodemon --watch webpack.config.js --exec npm run dev ",
"dev1": "webpack-dev-server --open --port 3001",
"build": "webpack",
"build3": "webpack ./src/main.js --output ./dist/app.js --mode development",
"build2": "webpack ./src/main.js --mode development",
"build1": "webpack main.js --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
},
"dependencies": {
"jquery": "^3.4.1"
}
}
webpack.config.js
// ./src/main.js --output ./dist/app.js --mode development
// 入口 出口 模式
// webpack 基於node node 的語法 webpack的配置文件裏面 能夠直接使用
// 引入 path 模塊
const path = require('path')
// 引入 html-webpack-plugin 插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/main.js'),
// 出口
output: {
// 出口目錄
path: path.join(__dirname, './dist'),
// 出口文件
filename: 'app.js'
},
// 模式
mode: 'development',
// 插件 plugins
plugins: [
// 配置 html-webpack-plugin插件
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html')
})
],
// webpack-dev-server 的配置信息
devServer: {
open: true,
port: 3002
},
// 配置 loader 加載器
module: {
rules: [
// 1. 處理 css 的規則
// demo.css
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 2. 處理 less
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 3. 處理圖片
// 圖片大小 < limit的值，轉化爲base64，此時用url-loader 【圖片大小：即字節】
// 圖片大小 >= limit的值，不轉base64(仍是直接的路徑=>md5的格式)，此時用file-loader
{ test: /\.(jpg|gif|png)$/, use: ['url-loader?limit=50000'] },
// 4. 處理 字體圖標
{ test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] },
// 5. 處理 js
{ test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
]
}
}
.babelrc
{
"presets": ["env", "stage-2"]
}
demo.css
ul {
list-style: none;
}
.img {
width: 300px;
height: 300px;
background: url('./hu.gif');
background-size: 100%;
}
.icon-zan {
font-size: 50px !important;
color: yellow;
}
demo.less
ul {
background: skyblue;
li {
&:hover {
color: yellow;
}
}
}
相關文章
- 1. 使用webpack詳細步驟
- 2. webpack基礎使用步驟筆記（一）
- 3. webpack初步使用
- 4. Webpack初步使用
- 5. vue的webpack打包步驟
- 6. react+webpack構建步驟
- 7. vue+webpack打包步驟
- 8. webpack項目建立步驟
- 9. primeng使用步驟
- 10. gulp使用步驟
- 更多相關文章...
- • MySQL下載步驟詳解 - MySQL教程
- • Spring整合Redis詳細步驟 - Redis教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 使用webpack詳細步驟
- 2. webpack基礎使用步驟筆記（一）
- 3. webpack初步使用
- 4. Webpack初步使用
- 5. vue的webpack打包步驟
- 6. react+webpack構建步驟
- 7. vue+webpack打包步驟
- 8. webpack項目建立步驟
- 9. primeng使用步驟
- 10. gulp使用步驟