webpack 基本配置
webpack是每個(gè)前端開(kāi)發(fā)者應(yīng)該掌握的技能，這篇文章記錄一下webpack的基本配置冗恨。
安裝
安裝之前請(qǐng)確保電腦已經(jīng)安裝了node.js
- 新建目錄
npm init // 項(xiàng)目初始化
npm install webpack webpack-cli -D // 安裝webpack和webpack命令行工具
配置
- 安裝完成后新建目錄結(jié)構(gòu)
node_modules // 項(xiàng)目依賴(lài) （默認(rèn)生成）
package.json // 項(xiàng)目描述 （默認(rèn)生成）
src // 源碼目錄 （手動(dòng)創(chuàng)建）
index.js // 入口js文件
views // 視圖文件夾 （手動(dòng)創(chuàng)建）
index.html // 入口html文件
webpack.config.js // webpack配置文件 （手動(dòng)創(chuàng)建）
- 打開(kāi)webpack.config.js答憔，編輯內(nèi)容
const path = require('path'); // 引入node里面內(nèi)置的path模塊
module.expres = {
entry:'./src/index.js', // 入口文件位置
output:{
filename:'bundle.js', // 打包完成后的文件名
path:path.join(__dirname,'dist') // 打包完成后輸出的位置
}
}
- 配置項(xiàng)目腳本文件
打開(kāi)package.json文件，新建項(xiàng)目腳本
{
......
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack" // 添加腳本
},
......
}
- 輸入命令 npm run build掀抹，出現(xiàn)下列代碼虐拓，就說(shuō)明打包成功
圖片
使用webpack-dev-server
webpack-dev-server 是一個(gè)簡(jiǎn)單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載傲武。
- 安裝
npm install webpack-dev-server -D
- 打開(kāi)webpack.config.js蓉驹，添加webpack-dev-server配置
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
// wepack-dev-server 配置
devServer:{
port:8080, // 配置端口為8080
hot:true, // 打開(kāi)熱更新
open:true, // 啟動(dòng)后打開(kāi)瀏覽器
contentBase:'./views' // 設(shè)置views目錄下的文件為可訪(fǎng)問(wèn)文件
}
- 配置項(xiàng)目腳本文件
打開(kāi)package.json文件，新建項(xiàng)目腳本
{
......
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack",
"dev":"webpack-dev-server" // 添加腳本
},
......
}
- 輸入命令 npm run dev揪利，出現(xiàn)下列代碼态兴，就說(shuō)明配置成功
i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from ./views
i ?wdm?: wait until bundle finished: /
i ?wdm?: Hash: a098c315bf6e497c3966
使用html-webpack-plugin
官網(wǎng)是這么說(shuō)的
HtmlWebpackPlugin簡(jiǎn)化了HTML文件的創(chuàng)建，以便為你的webpack包提供服務(wù)疟位。這對(duì)于在文件名中包含每次會(huì)隨著編譯而發(fā)生變化哈希的 webpack bundle 尤其有用瞻润。 你可以讓插件為你生成一個(gè)HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader绍撞。
解釋
html-webpack-plugin 插件是用于編譯 Webpack 項(xiàng)目中的 html 類(lèi)型的文件正勒，如果直接將 html 文件置于 ./src 目錄中，用 Webpack 打包時(shí)是不會(huì)編譯到生產(chǎn)環(huán)境中的傻铣，html-wepack-plugin就解決了這個(gè)問(wèn)題
- 安裝
npm install html-webpack-plugin -D
- 配置
打開(kāi)webpack.config.js文件章贞，編輯內(nèi)容
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
devServer:{
port:8080,
hot:true,
open:true,
contentBase:'./views'
},
// 添加內(nèi)容
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'./views/index.html'
})
]
}
使用loader
webpack 可以使用 loader 來(lái)預(yù)處理文件。這允許你打包除 JavaScript 之外的任何靜態(tài)資源非洲。你可以使用 Node.js 來(lái)很簡(jiǎn)單地編寫(xiě)自己的 loader
- 安裝css-loader
css-loader依賴(lài)style-loader
npm install style-loader css-loader -D
- 配置
打開(kāi)weboack.config.js 編輯內(nèi)容
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './views/index.html'
})
],
// 添加內(nèi)容
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader']
}
]
}
- 安裝url-loader
url-loader依賴(lài)file-loader
npm install url-loader file-loader -D
- 配置
打開(kāi)weboack.config.js 編輯內(nèi)容
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './views/index.html'
})
],
// 添加內(nèi)容
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'],
},
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
]
}
