webpack作为时下非常火的项目构建工具 已经有了非常多成熟的脚手架 vue-cli nuxt 但是有的时候我们需要自己实现一个比较符合自己需求的webpack配置就会有很多坑我这边简单提一些
第一个坑 现在的webpack不同于老版本 需要安装全局webpack 与webpack-cli才能运行按照下面操作执行
npm install -g webpack
npm install webpack-cli -g
创建项目
npm init
安装本地
npm i webpack --save--dev
npm i webpack-cli --save--dev
安装本地一方面是提示依赖 一方面也是为了防止全局webpack与本地依赖包不兼容等bug导致项目无法运行
webpack4x之后又两种mode 我们可用可不用
development 开发模式
production 产出模式
安装完基本依赖之后就是创建入口文件webpack.config.js 我下面放一个我简单配置的文件然后简述一下坑点
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const glob = require('glob')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const PurifyCssWebpack = require('purifycss-webpack');
//html页面模板与输出模板
const getHtmlConfig = function (name, title) {
return {
template: path.resolve(__dirname,'src/view/' + name + '.html'),
filename: name + '.html',
title: title,
inject: true, //嵌入页面
hash: true,
chunks: ['common','base', name], //引入这些js
minify: {
collapseWhitespace:true, // 合并空白字符
removeComments:true, // 移除注释
removeAttributeQuotes:true // 移除属性上的引号
}
}
}
const config = {
//开发模式
// mode:'development',
//生产模式
// mode:'production
entry: {
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'list': ['./src/page/list/index.js']
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[hash:5].js',
publicPath:'/'
},
//别名
resolve: {
alias: {
node_modules: __dirname + '/node_modules',
util: __dirname + '/src/util',
page: __dirname + '/src/page',
service: __dirname + '/src/service',
image: __dirname + '/src/image'
}
},
//别名
module: {
rules:[
//处理css
{
test:/\.css$/,
use:[{loader:'style-loader'},{loader:'css-loader'},{loader:'postcss-loader'} ],
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use: ['css-loader','postcss-loader'],
publicPath:'../'
})
},
// 处理less
{
test:/\.less$/,// 处理less
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
// 处理sass
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','sass-loader']
})
},
// 处理stylus
{
test:/\.styl$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','stylus-loader']
})
},
//处理js
{
test:/\.(js|jsx)$/,
use:['babel-loader'],
exclude:/node_modules/ //剔除node_modules模块
},
//处理图片
{
test:/\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
use:[{
loader:'url-loader',
options:{
limit:5000, //设置转base64的警戒值
outputPath: 'images' //图片打包出去的目录
}
}]
}
]
},
//分割提取公共代码
optimization:{
splitChunks: {
chunks: "async",
minSize: 2,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true,
cacheGroups: {
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
vendors: {
test: /([\\/]node_modules[\\/]|[\\/]page[\\/])/,
priority: -10
}
}
}
},
devServer:{
//设置服务器访问的基本目录
contentBase:path.resolve(__dirname, 'dist'), // 要求服务器访问dist目录
host:'localhost', // 设置服务器ip地址，可以是localhost
port:8090, // 设置端口号
open:true, //自动拉起浏览器
hot:true //模块热跟新
},
plugins: [
new CopyWebpackPlugin([{ // 静态文件输出 也就是复制粘贴
from:path.resolve(__dirname,'src/assets'), //将哪里的文件
to:'./pullic' // 复制到哪里
}]),
//热更新
new PurifyCssWebpack({ // 消除冗余css代码
paths:glob.sync(path.join(__dirname,'src/view/*.html')) //path.join合并路径
}),
new webpack.HotModuleReplacementPlugin(),
//将css单独打包到css文件
new ExtractTextPlugin("css/[name].css"),
// 打包之前先清理dist目录
new CleanWebpackPlugin(['dist']),
//提取公共代码创建缓存组
new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
// new HtmlWebpackPlugin(getHtmlConfig('list','列表页'))
]
}
module.exports = config
第一步html-plugin-webpack的使用 这个不必多少大家肯定了解 主要是设置模板文件和输出文件名 等可以按照我的配置来 这里没什么坑点
第二步一般开始用webpack-dev-server了这里就巨坑了尤其是热更新这一块
我们知道devserver为了快速开发是把我们的项目打包到内存中的默认是根路径 output中可以设置path和publicPath path是设置打包后的文件路径 publicPath 是设置打包后资源文件引用的前缀路径 这里需要注意
contentBase 参数可以配置我们的项目启动路径 但是由于devserver是默认编译打包到根路径内存所以此坑新手很容易踩到 那么如何改变devserver的编译路径呢 有人说publicPath实际上我试了并不行 这里的编译目录还是这个参数指定
热更新 这里出现有时候热更新有时候不行 是因为 webpack4的模块机制发生了改变，都是关于hot-module的，chunkId的一些问题
项目启动后就是各种loader的配置这里没什么坑比较简单
最大的坑还是CommonsChunkPlugin的废弃这里我们怎么分包呢采用了（optimization.splitChunks 和 optimization.runtimeChunk）有兴趣可以去官方研究下不过鉴于webpack的文档更新 大家也可以自行研究当然还有很多坑 爬坑也是一种乐趣