写本文的目的是记录自己摸索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构建技巧之生产篇。
完整版本请移步：https://github.com/linxner/webpackENV。
最后附上完整的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: ['.*']
}
])
],
}