webpack4簡單入門實(shí)例
毋庸置疑，webpack現(xiàn)在已經(jīng)成為前端很多的打包器。網(wǎng)上關(guān)于webpack的相關(guān)文章也是很多的，關(guān)于webpack的具體配置，官網(wǎng)上也是講解的很清楚，本文主要是根據(jù)自己的學(xué)習(xí)，進(jìn)行簡單的webpack實(shí)例的講解，供初學(xué)者進(jìn)行入門實(shí)戰(zhàn)。文中的實(shí)例是基于webpack4的，所以請(qǐng)小伙伴們一定要注意自己本地的環(huán)境，不要因?yàn)榄h(huán)境問題而浪費(fèi)不必要的時(shí)間。文章中如有錯(cuò)誤的地方，歡迎大家指正。
我的實(shí)例是循序漸進(jìn)的，我們先從最簡單的開始
新建一個(gè)demo文件夾，然后再將命令行切換到當(dāng)前目錄下，執(zhí)行如下命令
npm init -y npm install webpack --save-dev
之后我們就可以看到demo文件加下生成了一個(gè)package.json的文件，這個(gè)文件很重要，概括的說就是該文件包含了當(dāng)前工程所需要的所有依賴關(guān)系，具體的作用大家可以百度一下。
之后我們?cè)赿emo下新建文件夾src，在demo下新建文件webpack.config.js和index.html
在src文件夾下新建main.js
main.js
document.write("hello world");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}
執(zhí)行如下指令
webpack --mode development
命令執(zhí)行成功后，你會(huì)發(fā)現(xiàn)demo文件下下多了一個(gè)dist文件夾，在dist文件夾中，多了一個(gè)bundle.js文件
此時(shí)在瀏覽器中打開index.html文件，你將看到如下內(nèi)容
如此，我們便完成了一個(gè)最簡單的webpack實(shí)例，下面我們將在這個(gè)基礎(chǔ)上，一步一步的進(jìn)行擴(kuò)展?。?/p>
1.根據(jù)模板生成index.html
這就需要使用webpack的插件html-webpck-plugin
npm install --save-dev html-wbpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}
修改index.html，去掉bundle.js的引用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
</body>
</html>
執(zhí)行指令
webpack --mode development
之后我們就會(huì)看到在dist目錄下生成了以demo/index.html為模板的index.html
至于具體的html-webpack-plugin插件參數(shù)的解釋，可以查看這篇文章
2. 加載CSS文件
加載css文件，需要使用相應(yīng)的加載器，也就是需要配置相應(yīng)的loader.
我們先來準(zhǔn)備相應(yīng)的文件，我們?cè)趕rc下新建一個(gè)css文件夾，并新建文件style.css
我們將index.html中的樣式移入到style.css文件中，并做一點(diǎn)小修改
style.css
body {
background-color: yellow;
color:red;
}
然后再main.js文件中，我們引入相應(yīng)的樣式
main.js
import style from './css/style.css'
document.write("hello world");
加載css文件需要使用css-loader,以及style-loader，需要使用npm進(jìn)行安裝
npm install --save-dev css-loader style-loader
進(jìn)行webpack.config.js文件的配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}
最后我們執(zhí)行webpack --mode development
此時(shí)我們?cè)跒g覽器中查看dist文件加下的index.html，結(jié)果如下
此時(shí)如果你仔細(xì)查看dist文件夾，你會(huì)發(fā)現(xiàn)并沒有css文件，而在index.html中，其內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript" src="bundle.js"></script></body> </html>
那么問題來了，樣式去哪了？其實(shí)樣式已經(jīng)被打包進(jìn)了bundle.js腳本中，你可以在該文件中搜索一下 ‘background-color' ，一定會(huì)有所發(fā)現(xiàn)。
3. 加載圖片
下面我們更改一下樣式，在樣式中引入圖片
我們先在src目錄下新建img文件夾，同時(shí)在該文件夾中放入一張圖片test.jpg，然后我們來更改樣式
style.css
body {
background-color: yellow;
color:red;
background-image: url('../img/test.jpg');
}
如果此時(shí)我們直接去進(jìn)行打包，是會(huì)報(bào)錯(cuò)的。我們需要相應(yīng)的加載器去加載圖片，這里我們使用的是url-loader，同時(shí)我們還需要file-loader來加載文件。
npm install --save-dev url-loader file-loader
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'./images/',
limit:500
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
})
]
}
執(zhí)行指令webpack --mode development，然后我們會(huì)發(fā)現(xiàn)在dist文件夾下多了一個(gè)images文件夾，瀏覽index.html，內(nèi)容如下
至此我們完成了圖片的加載。
4. 進(jìn)行CSS文件的分離
將樣式文件進(jìn)行分離，需要使用webpack的插件extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@next
注意：在我寫這個(gè)demo時(shí)，最新版的extract-text-webpck-plugin是有問題的，所以需要安裝下一個(gè)版本的，如果你后面打包時(shí)出錯(cuò)，回頭再確認(rèn)一下這一步。還有一點(diǎn)需要注意的是，應(yīng)為樣式中的圖片路徑是相對(duì)于樣式文件所在目錄而言，此時(shí)我們將樣式文件單獨(dú)抽離出來，圖片原本的路勁肯定是發(fā)生的改變，此時(shí)需要在url-loader中配置publicPath為'../images'。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
{
test:/\.(jpg|png|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'./images/',
limit:500,
publicPath:'../images'
}
}]
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',
template:'index.html'
}),
new ExtractTextPlugin('css/[name].[hash:8].css')
]
}
之后，執(zhí)行webpack --mode development，然后我們就會(huì)發(fā)現(xiàn)dist下多了一個(gè)css文件夾。
5. 熱更新和自動(dòng)刷新
熱更新和自動(dòng)刷新需要使用webpack-dev-server，它是一個(gè)基于Node.js和webpack的一個(gè)小型服務(wù)器，它有強(qiáng)大的自動(dòng)刷新和熱替換功能。在命令行使用webpack-dev-server依賴于webpack-cli，因此也需要安裝webpack-cli
npm install --save-dev webpack-dev-server webpack-cli
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
module.exports =
{
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
inline: true,
hot: true,
host: '0.0.0.0',
port: 9000,
contentBase: path.resolve(__dirname, '/dist'),
compress: true
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(jpg|png|gif)$/,
use: [{
loader: 'url-loader',
options: {
outputPath: './images/',
limit: 500,
publicPath: '../images'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: './index.html',
template: 'index.html'
}),
new ExtractTextPlugin('css/[name].[hash:8].css'),
new webpack.HotModuleReplacementPlugin()
]
}
更改package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": " webpack-dev-server --mode development "
},
此時(shí)我們執(zhí)行npm run dev，然后在瀏覽器打開localhost:9000，就可以看到我們的應(yīng)用了。
而此時(shí)我們更改腳本，進(jìn)行保存后，更改后的內(nèi)容會(huì)實(shí)時(shí)展現(xiàn)在頁面上。但是我們更改樣式卻會(huì)發(fā)現(xiàn)沒有變化?。?！
原因是我們的樣式是通過extract-text-webpack-plugin進(jìn)行分離到單獨(dú)的css文件中，而HotModuleReplacementPlugin只會(huì)去監(jiān)聽js腳本的變化。為了實(shí)現(xiàn)更改樣式時(shí)，實(shí)時(shí)看到效果，我們只要不使用extract-text-webpack-plugin加載css即可，官方建議也是不要在開發(fā)環(huán)境中使用extract-text-webpack-plugin。
6. 配置映射
配置映射，添加devtool:'inline-source-map'選項(xiàng)即可，devtool的具體選項(xiàng)有很多
當(dāng)然，關(guān)于webpack的配置還是有很多的，我這里的列子應(yīng)該是足夠入門了，后面有時(shí)間的話我會(huì)再此基礎(chǔ)上再講一些其他webpack相關(guān)配置。當(dāng)然我本次列子中有很多是可以進(jìn)行進(jìn)一步的擴(kuò)展的，但本文的目的重在入門引導(dǎo)，后面自己對(duì)webpack的理解更加深入時(shí)，也會(huì)進(jìn)行進(jìn)一步的分享。
該項(xiàng)目的線上地址,歡迎大家下載。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了提高數(shù)據(jù)訪問速度的方法，具有很好的參考作用，需要的朋友一起來看下吧2016-12-12
Javascript中3種實(shí)現(xiàn)繼承的方法和代碼實(shí)例
這篇文章主要介紹了Javascript中3種實(shí)現(xiàn)繼承的方法和代碼實(shí)例,這3種方法分別為對(duì)象冒充、原型繼承、上二者的混合,需要的朋友可以參考下2014-08-08
js驗(yàn)證實(shí)用性非常高，用途非常廣泛，用于校驗(yàn)ip地址的格式等操作，本文給大家介紹JavaScript中常用的驗(yàn)證reg，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...2006-10-10
IFrame跨域高度自適應(yīng)實(shí)現(xiàn)代碼
最近在做項(xiàng)目中，遇到一個(gè)問題，就是iframe高度的自適應(yīng)問題，以下是解決辦法2012-08-08
JavaScript判斷變量是對(duì)象還是數(shù)組的方法
這篇文章主要介紹了JavaScript判斷變量是對(duì)象還是數(shù)組的方法,本文分別使用instanceof和typeof實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
這篇文章主要介紹了簡單使用webpack打包文件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
動(dòng)態(tài)加載css方法實(shí)現(xiàn)和深入解析
本文主要介紹了動(dòng)態(tài)加載css的方法實(shí)現(xiàn)和深入解析。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
今天項(xiàng)目中突然遇到了不太明白的寫法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中.?、??、??=的用法以及含義的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Ionic2開發(fā)環(huán)境的搭建教程，文中步驟介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06