webpack流程總結
-
- webpack 用來把一些js,css ,sass, 圖檔,整理好,放在一起,
webpack 用來把一些js,css ,sass, 圖檔,整理好,放在一起,
全局安裝
npm i -g webpack webpack-cli
建立項目目錄 //建立一個webpack-demo,進入她
mkdir webpack-demo && cd webpack-demo
初始化項目 //會生成一個 package.json 檔案
npm init //一直回車就行
再局部安裝
npm i -D webpack webpack-cli
然後開始在 webpack-demo 檔案夾下建立目錄結構、檔案和内容：
-- webpack-demo
-- package.json
-- src
-- index.js
-- dist
-- index.html
接下來,在終端
npm install --save lodash
在index.js中(如下代碼,可複制)
import _ from 'lodash'; // npm install --save lodash
// lodash 是一個js工具庫，用來操作 object、array、number... 更友善了
function component(){ //随便寫了一些内容
var element = document.createElement('div')
element.innerHTML = _.join(['Hello', 'webpack'], ' ')
return element;
}
document.body.appendChild( component() )
在 src / index.js 裡 這個js檔案同樣可以用來引入其他的 js / css 檔案 ,
- - - - - - 如
- - - - - - - import ‘./index1.js’ ;
- - - - - - - import ‘./index2.js’ ;
- - - - - - - import ‘./index.css’
(隻要沒沖突,或錯誤)打包的時候,會自動把這些自動打包在同一個js檔案裡
然後在 dist / index.html 中(如下代碼)
<!DOCTYPE html>
<html >
<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>Document</title>
</head>
<body>
</body>
</html>
<script src="./main.js"></script> //隻是引一個同一目錄下的JS檔案
這段html代碼沒有任何差別,隻是引了一個和這個html檔案同一級的一個JS檔案
這裡說明一下,引這個JS檔案是因為:等下打包過的檔案我會用這個檔案名稱,是以實作引過來.
再在剛剛配置的 package.json 檔案中,把 “main” : “index.js”, 删掉:(如圖第5行)
替換成
"private" : true
在終端
npx webpack
就會開始打包了;
可以在dist目錄下,看到打包的 main.js檔案;
然後運作 index.html 看下成功否
到這裡 基本上 webpack 就很容易了
接下來
在webpack-demo目錄下建立檔案 webpack.config.js 作為配置檔案,
根據入口頁的相關依賴，合并到dist/bundle.js中
裡面寫代碼(可複制)
const path = require('path') // 在 webpack 中使用 require 引入自帶的path 子產品，這裡不能使用 import
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
再執行
npx webpack --config webpack.config.js
會在dist 目錄下生成 bundle.js 檔案
說明一下: 導入 path 子產品 不能用 import ,要用 require
entry:-----如口檔案;
output:-------出口檔案 ;
path: path.resolve(__dirname, ‘dist’) --------- 這是webpack-demo的路徑//D:\code\webpack\day1.21\webpack-demo\ 再 + dist 目錄下
filename: ‘bundle.js’, 在dist 目錄下生成 bundle.js 檔案
這裡的 bundle.js 和之前的main.js一樣,但是這裡接下來可以配置其他類型的檔案了
<中間停一下
考慮到用 執行
npx webpack --config webpack.config.js
太長,不是特别友善，我們可以設定快捷方式
在package.json 檔案中
“scripts”:{
“build”: “webpack”
}
使用 npm run build 指令，代替之前使用的 npx 指令。
就是自定義的指令 需要用 ( npm run 指令名稱 )來運作
指令行：npm run build >
開始壓縮 css 檔案,
在src中建立目錄 src/style/index.css
在index.css中寫一些樣式
div{
width: 200px;
height: 200px;
background: greenyellow
}
終端下載下傳子產品
npm install -D style-loader css-loader
在配置( webpack.config.js )檔案中
webpack.config.js
module.exports = {
entry: ...... //入口不變
output: {} ..... //出口不變
module: { //外面加一層
rules:[
{ test:/\.css$/, use:['style-loader', 'css-loader'] }
]
}
}
說明一下：
webpack打包時，如果碰到的是.css結尾的檔案，使用style-loader和css-loader處理。
style-loader：将 JS 字元串生成為 style 節點
css-loader：将 CSS 轉換為 CommonJS 子產品
然後在 src 入口檔案 index.js 中 引入那個css
import './style/index.css'
(如圖)
最後在指令行中執行
npm run build
到這裡 css 打包就好了
打包scss
如果想使用 scss 檔案，需要安裝 npm install sass-loader node-sass --save-dev
然後規則中配置：
{ test:/.scss$/, use:[‘style-loader’, ‘css-loader’, ‘sass-loader’] }
打包圖檔
指令行執行：npm run build，兩張圖檔會被複制到 dist 目錄下面，網頁能正常使用，如果想配置圖檔輸出後的路徑，可以：
use:[ {loader:‘file-loader’, options:{name:’[name].[ext]’, outputPath:‘images’}} ]
打包字型
字型這種資源需要用到 file-loader 或 url-loader，npm i -D url-loader
規則配置：
{ test: /.(woff|woff2|eot|ttf|otf)KaTeX parse error: Expected 'EOF', got '}' at position 25: …'file-loader'] }̲ file-loader會儲存…/, use: [‘url-loader’] } 而url-loader會和js合并到一起
style.css 或 style.scss
@font-face{
font-family: abc;
src: url(./fonts/經典毛筆字型.ttf) format(“truetype”);
}
div{ font-family:“abc” }
如果我們想把js檔案分開，需要配置多入口。
配置wepack.config.js檔案
entry:{ app:'./src/index.js', print:'./src/print.js' },
output:{ filename:'[name].bundle.js', path:path.resolve(__dirname, 'dist') }
那麼 在src/index.html 檔案裡面要多引一個了