新手快速上手webpack4打包工具的使用詳解
一直使用webpack,上次也分享過webpack配置es6~9的語法參考鏈接,但是對于一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節(jié)休假期間對webpack4的知識點梳理一次。方便一些剛剛?cè)胄械娜藢W(xué)習(xí),也是對自己的一種總結(jié)與提高
一、幾個盲點的解釋
1、全局安裝與局部安裝
- 對于一般的新手都有一個疑惑我是全局安裝還是本項目中安裝(局部安裝),個人建議,現(xiàn)在前端發(fā)展那么快,我們使用局部安裝的方式更好(使用最新的技術(shù)棧)。
- 我們知道javascript是弱語言,有局部變量和全局變量,其實全局安裝與局部安裝的性質(zhì)與函數(shù)的全局變量與局部變量有點類似。
2、安裝包的時候--save與-D的區(qū)別
一般我們僅僅是在開發(fā)環(huán)境依賴的包直接使用-D就可以,這樣就會在項目的package.json文件中的devDependencies新增相關(guān)的配置信息
npm install webpack webpack-cli -D
--save是會放在package.json文件的dependencies中
記住僅僅是開發(fā)環(huán)境需要使用的包就使用-D
二、webpack所謂的0配置使用
webpack是基于配置的前端腳手架,在實際項目中開發(fā)需要配置你需要的插件與加載器。
1、webpack最基本的基重要的是:
- plugins:配置插件的
- module:主要配置一些加載器
2、初始化項目
創(chuàng)建一個文件夾webpack-demo
初始化生成package.json文件
npm init --yes
3、安裝webpack最基本的依賴包
npm install webpack webpack-cli -D
4、創(chuàng)建一個文件夾src并在里面創(chuàng)建一個index.js的文件
5、在命令行中運行(先忽視警告信息)
npx webpack
6、在生成的dist文件夾下會生成一個大包好的main.js文件,在該文件夾下創(chuàng)建一個index.html文件引入main.js,在瀏覽器中查看控制臺是否輸出信息。
二、webpack的配置
1、在項目下創(chuàng)建一個webpack.config.js文件
2、可以配置的有
const path = require('path');
module.exports = {
entry: '', // 打包文件的入口
output: {}, // 打包后的出口文件配置
devServer: {}, // 開發(fā)服務(wù)器
module: {}, // 模塊配置
plugins: {}, // 插件的配置
mode: 'development', // ['development', 'production']模式
resolve: {}, // 配置解析
}
三、配置開發(fā)環(huán)境(在內(nèi)存中打包)
1、安裝包
npm install webpack-dev-server -D
2、在webpack.config.js中配置入口文件與出口文件
module.exports = {
entry: './src/index.js', // 打包文件的入口
output: {
filename: 'build.js',
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
},
...
}
3、配置開發(fā)devServer
module.exports = {
...
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 8000,
compress: true, // 自動壓縮
open: true, // 自動打開瀏覽器
},
}
4、在package.json中配置命令
...
"scripts": {
"dev": "webpack-dev-server",
},
...
5、調(diào)試性的運行命令(會自動打開瀏覽器,但是里面沒任何信息展示)
npm run dev
6、使用html-webpack-plugin自動生成html頁面的插件
1.安裝包
npm install html-webpack-plugin -D
2.在webpack.config.js中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
3.在plugins中配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
})
],
4.關(guān)于index.html的內(nèi)容
<!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><%=htmlWebpackPlugin.options.title%></title> </head> <body> </body> </html>
5.關(guān)于html-webpack-plugin的配置請查看
6、運行npm run dev直接打開瀏覽器,打開控制臺可以查看到打印信息
7、創(chuàng)建打包命令(在package.json中添加命令)
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
8、使用哈希值的方式創(chuàng)建隨機生成數(shù)字,解決緩存的問題
1、對生成的js文件生成隨機數(shù)
output: {
filename: 'build.[hash].js', // 默認生成20位的哈希值
// filename: 'build.[hash:8].js' 可以定制生成多少位的隨機數(shù)
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
},
2、對html里面引入的js生成哈希值(會生成?哈希值)
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
hash: true,
})
],
3、運行命令npm run build可以查看dist文件夾下的文件是否帶了尾巴(注意點:要更新文件打包會生成新的,如果沒改動文件,僅僅是多次打包是一樣的)
4、運行后的效果
<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>
9、關(guān)于html-webpack-plugin其它常用的配置
new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true, // 去除雙引號
collapseWhitespace: true, // 合并代碼到一行
}
})
四、清除之前的plugin的插件的使用
我們對每次打包后的緩存文件進行刪除確保每次都是最新的
1、安裝
npm install clean-webpack-plugin -D
2、在webpack.config.js中使用
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['./dist']),
...
],
五、關(guān)于webpack入口文件的幾種方式
1、單一入口文件(參考上面)
2、多入口文件(可以寫成一個數(shù)組),共同打包帶一個出口文件中
module.exports = {
mode: 'development',
entry: [
'./src/index.js',
'./src/a.js'
],
output: {
filename: 'build.[hash:8].js',
// 注意這個位置必須是絕對路徑
path: path.join(__dirname, 'dist')
}
}
3、多入口多出口多模板的模式
1.入口文件與出口文件的配置
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
filename: '[name].[hash:8].js',
path: path.join(__dirname, 'dist')
}
}
2.模板的配置(需要注明輸出文件的名字)
...
plugins: [
new CleanWebpackPlugin(['./dist']),
new HtmlWebpackPlugin({
filename: 'index.html', // 注明打包后的文件名
template: './src/index.html',
title: 'webpack測試1',
hash: true,
chunks: ['index'] // 注明選擇哪個js文件
}),
new HtmlWebpackPlugin({
filename: 'a.html',
template: './src/index.html',
title: 'webpack測試2',
hash: true,
chunks: ['a']
})
],
}
...
六、webpack熱更新的使用
1、根據(jù)上面的方式我們可以實現(xiàn),修改js代碼瀏覽器會刷新,但是是類似我們?nèi)斯さ乃⑿?如果是有狀態(tài)機的數(shù)據(jù)的時候會丟失數(shù)據(jù))
2、我們可以使用webpack自帶的一個熱更新的插件
3、使用方式
1.在webpack.config.js中配置
const webpack = require('webpack');
...
plugins: [
new webpack.HotModuleReplacementPlugin(),
...
]
...
2.在主要的入口index.js文件中加上
if (module.hot) {
module.hot.accept();
}
七、配置加載css樣式的
webpack默認是支持js的,對于別的css或者typescript必須要安裝加載器
1、安裝包
npm install style-loader css-loader less less-loader -D
2、在webpack.config.js中的module配置規(guī)則(use中是一個數(shù)組,從后面解析到前面)
...
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
}
]
},
...
3、在src中創(chuàng)建一個css的文件夾,里面創(chuàng)建a.css和b.less文件
4、在index.js中引入樣式文件
import './css/a.css'; import './css/b.less';
5、啟動服務(wù),查看瀏覽器Elements欄
八、抽取成單獨的一個樣式文件
上面的方式雖然可以加載樣式文件,但是加載出來的全部的以<style type="text/css">....</style>的方式到頁面中,增加了js文件的體積,如果項目大,可能會造成js文件過大加載慢,甚至加載不出的弊端。
1、抽取單獨的css目前主要有2個包可以選擇
- 使用插件extract-text-webpack-plugin@next
- 使用插件mini-css-extract-plugin(今后取代上面那個插件的包)
2、安裝包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
3、使用extract-text-webpack-plugin@next插件的方式
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
2.修改module中的加載器
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
]
},
...
3.使用插件
plugins: [
...
new ExtractTextWebpackPligin({
filename: 'css/index.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack測試',
hash: true,
// 先注釋下面的代碼,更好看結(jié)果
// minify: {
// removeAttributeQuotes: true, // 去除雙引號
// collapseWhitespace: true, // 合并代碼到一行
// }
})
],
4、在index.js中依然是導(dǎo)入css文件
import './css/a.css'; import './css/b.less';
4、使用mini-css-extract-plugin插件方式
1.導(dǎo)包
const MiniCssTractPlugin = require('mini-css-extract-plugin');
2.在module中配置
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
3.配置插件
plugins: [
...
new MiniCssTractPlugin({
filename: 'css/css.css',
}),
]
4.一樣的在index.js中導(dǎo)包
5.測試
九、抽取成多個單獨的樣式文件
1、導(dǎo)包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
2、預(yù)先實例化兩個輸出文件的對象
const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');
3、在module中預(yù)先實例化的對象
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
})
}
]
},
4、配置插件
plugins: [ cssExtract, lessExtract, ... ]
5、運行命令npm run build查看
十、關(guān)于抽取樣式修改后不刷新的問題(開發(fā)的時候依然是加上style中)
1.定義disable
const cssExtract = new ExtractTextWebpackPligin({
filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
filename: 'css/b.css',
});
2.在modul中使用
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
})
}
]
},
十一、關(guān)于抽取的時候不引入未使用的樣式來簡單打包后的體積
1、安裝包
npm install purifycss-webpack purify-css glob -D
2、導(dǎo)入
const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
3、使用
...
// 注意必須要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
paths: glob.sync(path.resolve('src/*.html'))
})
...
十二、給css3樣式加上前綴
1、使用postcss實現(xiàn)該功能
2、安裝包
npm install postcss-loader autoprefixer -D
3、配置postcss-loader的加載器
...
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'postcss-loader'},
]
})
},
...
4、項目下新創(chuàng)建一個postcss.config.js的配置文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
5、在a.css中寫上css3的樣式
body {
background: cyan;
transform:rotate(30deg);
}
6、執(zhí)行命令npm run build查看生成的文件
十三、關(guān)于更多插件的使用請自己搜索,只要你能想到的就能搜索到的
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
很多DOM對象都有原生的事件支持，向div就有click、mouseover等事件，事件機制可以為類的設(shè)計帶來很大的靈活性，相信.net程序員深有體會。隨著web技術(shù)發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機制，通過事件對外通信，能夠極大提高開發(fā)效率2013-08-08
可視化埋點平臺元素曝光采集intersectionObserver思路實踐
這篇文章主要為大家介紹了可視化埋點平臺元素曝光采集的思路—intersectionObserver的實戰(zhàn)經(jīng)驗詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了javascript實現(xiàn)3D變換的立體圓圈效果,涉及javascript動態(tài)操作頁面元素實現(xiàn)滾動與變色的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)放大鏡效果的思路與代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
本篇文章主要對javascript獲取url信息的常見方法進行介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
業(yè)務(wù)中比較常用的JavaScript工具函數(shù)，可以用在前端環(huán)境，也可以用在node服務(wù)端，統(tǒng)一整理，方便查閱，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
JavaScript數(shù)組及常見操作方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見操作方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
微信小程序錄音實現(xiàn)功能并上傳(使用node解析接收)
在我們的日常開發(fā)中經(jīng)常會遇到錄音功能，并上傳到服務(wù)器，今天小編給大家分享微信小程序錄音功能實現(xiàn)并上傳錄音文件，使用node解析接收,需要的朋友可以參考下2020-02-02
下面小編就為大家?guī)硪黄猇C調(diào)用javascript的幾種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了7個好用的TypeScript新功能，想了解TypeScript的同學(xué)，一定要看一下2021-05-05