寫本文的目的是記錄自己摸索webpack自動構建的過程，有時候我們需要開發一些比較簡單的頁面的時候，用框架的構建工具有點太 ‘小題大做’，同時也會增加不必要的內存，所以需要一套自己的構建工具，gulp更加強調開發規範，而webpack注重模塊化。但在如今，webpack你無法拒絕。本文僅介紹開發環境中webpack的構建的某些用法。
一、入口
入口推薦使用絕對路徑：
entry: __dirname + '/src/main.js'
//__dirname是當前文件所在目錄
或者
const path = require('path');
entry: path.resolve(__dirname, '../src/main.js')
乾脆定義個函數：
function resolve(dir) {
return path.join(__dirname, '..', dir) //返回的是項目目錄下的文件
}
module.exports = {
entry: resolve('src/main.js')
}
二、出口
也推薦用上述方法採用絕對路徑：
output: {
filename: 'bundle.js',
path: resolve('dist'),
},
三、module
定義處理各個模塊的規則：
js：
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, //不要處理依賴中的js文件
include: /\src/, //只處理src下的js文件，這樣做可以加快匹配速度，提高打包速度
use: {
loader: 'babel-loader',
}
},
images：
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000, //小於10kb的圖片轉爲base64
name: 'static/img/[name].[hash:8].[ext]',
}
}]
},
media：
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, //小於10kb的圖片轉爲base64
name: 'static/media/[name].[ext]'
}
},
fonts：
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/fonts/[name].[ext]'
}
},
css：
//require的依賴要先npm安裝
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({ //這裏用了autoprefixer，npm安裝並引入
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009',
}),
],
},
},
'less-loader' //這裏使用了less
],
},
提一下html中的圖片處理：
{
test: /\.(htm|html)$/i,
use: [{
loader: 'html-withimg-loader' //插件
}]
},
四、mode
webpack4+需要使用這個屬性指定開發環境，不然瀏覽器會發出警告
mode: 'development' //生產環境 'production'
五、HMR模塊熱替換
devServer: {
disableHostCheck: true,
clientLogLevel: 'warning',
contentBase: '../dist',
watchContentBase: true,
hot: true,
host: 'localhost',
port: 8080,
open: true,
noInfo: true,
quiet: true,
stats: {
colors: true
}
},
各屬性介紹：webpack開發中[dev-server]
六、plugins
plugins: [
new webpack.NamedModulesPlugin(), //當開啓 HMR 的時候使用該插件會顯示模塊的相對路徑，建議用於開發環境。，webpack4+ mode爲development時默認加了這個插件，可以不用寫
new webpack.HotModuleReplacementPlugin(), //啓用HMR
new HtmlWebpackPlugin({ //該插件將爲你生成一個 HTML5 文件
filename: 'index.html',
template: 'index.html', //本地自定義模板，不然你在index.html中的寫的東西會被替換爲默認
inject: true
}),
],
new CopyWebpackPlugin([ //複製你的靜態文件，就是僅僅是複製那些你不需要處理的文件
{
from: resolve('static'), //從static中
to: resolve('dist'), //複製到dist下
ignore: ['.*']
}
])
七、npm start
在你的package.json文件的scripts中加一個start
"start": "webpack-dev-server --inline --progress --config config/webpack.dev.conf.js",
npm start 就可以開始你的開發了。
最後附上完整的webpack.dev.conf.js文件
'use strict'
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: resolve('src/main.js'),
output: {
filename: 'bundle.js',
path: resolve('dist'),
},
devtool: "eval-source-map",
module: {
rules: [
{
test: /\.(htm|html)$/i,
use: [{
loader: 'html-withimg-loader'
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:8].[ext]',
}
}]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/fonts/[name].[ext]'
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /\src/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.(css|less)$/,
use: [
'style-loader', 'css-loader', {
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009',
}),
],
},
}, 'less-loader'
],
},
],
},
devServer: {
disableHostCheck: true,
clientLogLevel: 'warning',
contentBase: '../dist',
watchContentBase: true,
hot: true,
host: 'localhost',
port: 8080,
open: true,
noInfo: true,
quiet: true,
stats: {
colors: true
}
},
mode: "development",
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new CopyWebpackPlugin([
{
from: from: resolve('static'), //從static中
to: resolve('dist'),
ignore: ['.*']
}
])
],
}
生產環境的構建可以看我另一篇博文：webpack構建技巧之生產篇