webpack 構建說明
github 地址：https://github.com/chick-check/webpack-config-record.git
- 創建項目目錄
- test
- dist
- src
- css
- js
- images
- main.js
- index.html
- 初始化項目
npm init -y,會生成 package.json 文件 - 安裝 webpack 和 webpack-cli(用於在命令行執行 webpack)
npm install webpack webpack-cli --save-dev; 當前版本：[email protected] / [email protected] 生成package-lock.json 和 node_modules - 編寫 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>Document</title>
</head>
<body>
<script src = "./main.js"></script>
</body>
</html>
- 然後可以通過
webpack ./src/main.js --mode development將./src/main.js文件打包到 ./dist/main.js; webpack4 默認了打包到的路徑，所以像之前的寫法會報錯。 - 每次都通過
webpack ./src/main.js --mode development打包很麻煩，所以把配置文件寫好，然後直接執行webpack就好啦。 - 編寫 webpack 配置文件 webpack.config.js，先根目錄添加，在編寫。
const path = require('path')
module.exports = {
mode:'development',
entry:path.resolve(__dirname, './src/main.js')
}
- 試試在 main.js 裏寫些代碼，看能不能渲染到頁面上去呢？
/*
1、首先安裝 jquery: npm i jquery
2、然後導入
*/
import $ from 'jquery'
$(function(){
$('#tt').css('backgroundColor','lightblue')
})
webpack --watch可以實時監聽，修改保存後自動打包。- 使用 webpack-dev-server 工具也可以實現自動打包編譯的功能。這個工具的用法和 webpack 一樣。
安裝webpack-dev-servernpm i webpack-dev-server -D，這是項目中安裝的，所以無法把 webpack-dev-server 當成命令在終端執行。
此時在 package.json 配置，之後可以直接執行npm run build執行 webpack-dev-server，–open 打開本地瀏覽器 --port 3000 設置端口號 --contentBase 設置路徑 --hot 熱更新(熱更新可以實現編譯時部分更新；頁面異步更新，而不是刷新整個頁面) ;再執行npm run build試試。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server --open --port 3000 --contentBase src --hot"
}
到這裏也只是完成了自動編譯的功能，修改 main.js 文件並沒有實現打包到 dist/main.js，爲什麼呢？
一下爲執行npm run build 時的輸出信息，可以看出 webpack 被託管於跟目錄，這是因爲通過webpack-dev-server 打包的main.js 文件，並沒有存到實際的物理磁盤中，而是託管到電腦內存中，所以在項目根目錄上，也找不到打包好的 main.js 文件。
[email protected] build /Users/weichaofang/workspaces/test
webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 0122b3897faa80afb5e2
所以修改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>Document</title>
</head>
<body>
<div id = "app">
<h1 id ='tt'>hello</h1>
</div>
<script src="/main.js"></script> <!--引入內存裏的 js 文件-->
</body>
</html>
- 既然引入的是內存中的 js 文件，那能不能把 html 頁面也放到內存中呢？
使用 html-webpack-plugin 可以實現
- 首先安裝插件
npm i html-webpack-plugin -D - 配置 webpack.config.js 文件
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry:path.resolve(__dirname, './src/main.js'),
plugins:[
new htmlWebpackPlugin({//創建內存中生成 html 頁面的插件
template:path.resolve(__dirname,'./src/index.html'), //指定模板頁面，根據這個頁面生成內存中的頁面
filename:'index.html'
})
]
}
使用html-webpack-plugin，可以自動在內存中根據指定頁面生成內存中的頁面；自動把打包好的 main.js 文件追加到頁面中，所以不需要指明頁面中 js 文件的引用路徑。
- 在 main.js 中使用 import 引入樣式表，保存之後會報錯誤。
//試試 jQuery
/*
1、首先安裝 jquery: npm i jquery
2、然後導入
*/
import $ from 'jquery'
import './css/index.css'
$(function(){
$('#tt').css('backgroundColor','red')
})
這是因爲webpack 默認只處理 js 文件，無法處理其他非 js 文件；此時需要手動安裝第三方 loader 加載器;
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i style-loader css-loader -D
之後在配置文件裏配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss/,
use:['style-loader','css-loader','sass-loader']
},
{ /*
//webpack 的 css 不能處理 url ,包括圖片和字體，所以需要第三方加載器。limit 給定圖片大小，單位 byte,
如果引入的圖片大於等於limit值，不會轉化成 base64;name 表示名字和後綴不進行哈希轉換，和原來的保持一致;
可是hash 保證的圖片重名也不會有錯，所以還是需要的，可以截取前8位hash值
*/
test:/\.(jpg|png|gif|bmp|jpeg)$/,
use:'url-loader?limit=7632&name=[hash:8]-[name].[ext]'
},
{
test:/\.(ttf|eot|svg|woff|woff2)$/,
use:'url-loader'
},
{
test:/\.js$/,
use:'babel-loader',
exclude:/node_modules/ //僅轉換自己寫的 js 文件，排除 node_modules 裏的 js 文件
}
]
}
- webpack ,默認只能處理部分 es6新語法，此時需要藉助 第三方 loader 幫助處理成低級語法，之後把結果交給 webpack 打包給 main.js
cnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i babel-preset-env babel-preset-stage-0 -D- 之後在 webpack 配置文件 module 節點 rules 數組中，添加新的匹配規則在項目根目錄，新建 .babelrc 的 Babel 的配置文件，這個配置文件是 json 格式，不能寫註釋，字符串必須用雙引號。【語法】【插件】 是不含 babel-loader 和 babel-preset 的後面部分。
{
"plugins": ["transform-runtime"],
"presets": ["env","stage-0"]
}
注意：export default 和 export 是es6 向外暴露成員的方式，兩個方式可以一起用，但是export default只能暴露一次，接收時，參數隨意；export可以多次暴露，名稱不一樣，用{名稱} 接收，名稱 必須和定義時候的一樣；module.exports={} 和 exports 是node 向外暴露成員的方式；
導入模塊：es6 是 import xx from xx；node 是 var a = require(‘模塊標識符’)