如果你喜欢这系列的文章,欢迎star
我的项目,源码地址,点击这里
模板解析配置项
webpack
还有一个配置项 resolve
它有很多配置项,具体可以看 https://webpack.js.org/configuration/resolve/
下面三项是我觉得特别有用的:
// 模版解析配置项
resolve: {
// 设置可省略文件后缀名
extensions: [' ','.js','.json','.jsx'],
// 查找 module 的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")], // 绝对路径;
// 配置路径映射(别名)
alias: {
pages: path.resolve(__dirname, 'src/pages'),
components: path.resolve(__dirname, 'src/components')
}
},
extensions
配置可省略文件后缀名的文件类型,在引用这些文件的时候,我们就可以省略去写后缀名了alias
配置路径映射,就更方便了,我们在引用文件时,路径的复杂程度会让我们耗费很多时间,配置了别名,一切就简单多了~modules
配置了路径映射,可以通过这个配置设置要从哪里找这些文件- 这里我配置了
pages
components
两个路径别名,这是比较常见的两个文件夹,可以现在src
文件夹下创建这两个文件夹,以后用得到~ 一个页面文件夹,一个组件文件夹,当用到这两个文件夹内的任何文件,都可以直接使用 别名 + 别名指定的路径下文件的路径就可以引用,无论该路径多么复杂,再也不会出现一大串../../
了~ - 当然这里也可以指定第三库的引用路径,
webpack
默认引用这些库是未集成的相当于开发环境的文件,还需要去递归大量的依赖文件,这样会很耗时,通过指定路径,可以直接指定他们的生产环境的路径,所有递归依赖已经解析过了,这样可以减少文件递归解析所耗时间~
一切配置完成后,依然需要检测,有没有错误分别执行 npm run build
npm run dev
npm start
看一切是否正常,页面能正常显示没有报错,则一切正常~
到此,一个比较完整的 webpack4.x
的配置就算完结了,当然这里并没有涉及到 webpack
配合其他一些前端开发工具的配置,那些我会单独另外做成一个小项目来讲,这里只是单纯的记录 webpack4.x
的各项配置
相关文件配置信息更新情况
以下为本文已涉及到的配置文件的当前详细信息
webpack.prod.conf.js
文件现在的配置信息情况:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// 入口文件配置项
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
vendor: ["vue",'vue-router']
},
// 输出文件配置项
output:{
path:path.resolve(__dirname,"dist"),
filename: 'js/[name].[chunkhash].js',
chunkFilename: 'js/[name].[chunkhash].js',
publicPath:""
},
// 开发工具
devtool: 'cheap-module-source-map',
// webpack4.x 环境配置项
mode:"production",
// 加载器 loader 配置项
module:{
rules:[
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.resolve(__dirname, 'src')
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8192字节的图片打包成base 64图片
name:'images/[name].[hash:8].[ext]',
publicPath:''
}
}
]
},
{
// 文件依赖配置项——字体图标
test: /\.(woff|woff2|svg|eot|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'fonts/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——音频
test: /\.(wav|mp3|ogg)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'audios/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——视频
test: /\.(ogg|mpeg4|webm)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'videos/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
test:/\.html$/,
use:[
{
loader:"html-loader",
options:{
attrs:["img:src","img:data-src"]
}
}
]
}
]
},
// webpack4.x 新增配置项
optimization: {
splitChunks: {
chunks: 'initial', // 只对入口文件处理
cacheGroups:{
vendors: {
test: /node_modules\//,
name: 'vendor',
priority: 10,
enforce: true,
},
}
},
runtimeChunk: {
name: 'manifest'
},
minimizer: [ // 用于配置 minimizers 和选项
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
// 插件配置项
plugins: [
new CleanWebpackPlugin(),
new webpack.HashedModuleIdsPlugin(),// 实现持久化缓存
new HtmlWebpackPlugin({
filename: 'index.html',// 输出文件的名称
template: path.resolve(__dirname, 'src/index.html'),// 模板文件的路径
title:'webpack-主页',// 配置生成页面的标题
minify:{
removeRedundantAttributes:true, // 删除多余的属性
collapseWhitespace:true, // 折叠空白区域
removeAttributeQuotes: true, // 移除属性的引号
removeComments: true, // 移除注释
collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如:readonly checked
},
favicon:''
}),
new MiniCssExtractPlugin({
filename: "css/[name].[hash].css",
chunkFilename: "css/[name].[hash].css"
})
],
// 模版解析配置项
resolve: {
// 设置可省略文件后缀名
extensions: [' ','.js','.json','.jsx'],
// 查找 module 的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")], // 绝对路径;
// 配置路径映射(别名)
alias: {
pages: path.resolve(__dirname, 'src/pages'),
components: path.resolve(__dirname, 'src/components')
}
},
}
webpack.dev.config.js
文件现在的配置信息情况:
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const open = require('opn');//打开浏览器
const chalk = require('chalk');// 改变命令行中输出日志颜色插件
const ip = require('ip').address();
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 入口文件配置项
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
vendor: ["vue",'vue-router']
},
// 输出文件配置项
output:{
path:path.resolve(__dirname,"dist"),
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[name].[chunkhash].js',
publicPath:""
},
// 开发工具
devtool: 'eval-source-map',
// webpack4.x 环境配置项
mode:"development",
// 加载器 loader 配置项
module:{
rules:[
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.resolve(__dirname, 'src')
},
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
},{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8192字节的图片打包成base 64图片
name:'images/[name].[hash:8].[ext]',
publicPath:''
}
}
]
},
{
// 文件依赖配置项——字体图标
test: /\.(woff|woff2|svg|eot|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'fonts/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——音频
test: /\.(wav|mp3|ogg)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'audios/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——视频
test: /\.(ogg|mpeg4|webm)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'videos/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
test:/\.html$/,
use:[
{
loader:"html-loader",
options:{
attrs:["img:src","img:data-src"]
}
}
]
}
]
},
// webpack4.x 新增配置项
optimization: {
splitChunks: {
chunks: 'initial', // 只对入口文件处理
cacheGroups:{
vendors: {
test: /node_modules\//,
name: 'vendor',
priority: 10,
enforce: true,
},
}
},
runtimeChunk: {
name: 'manifest'
},
},
// 插件配置项
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',//输出文件的名称
template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
title:'webpack-主页',//配置生成页面的标题
}),
new webpack.HotModuleReplacementPlugin()
],
// 模版解析配置项
resolve: {
// 设置可省略文件后缀名
extensions: [' ','.js','.json','.jsx'],
// 查找 module 的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")], // 绝对路径;
// 配置路径映射(别名)
alias: {
pages: path.resolve(__dirname, 'src/pages'),
components: path.resolve(__dirname, 'src/components')
}
},
// 开发服务配置项
devServer: {
port: 8080,
contentBase: path.resolve(__dirname, 'dist'),
historyApiFallback: true,
host: ip,
overlay:true,
hot:true,
inline:true,
after(){
open(`http://${ip}:${this.port}`)
.then(() => {
console.log(chalk.cyan(`http://${ip}:${this.port} 已成功打开`));
})
.catch(err => {
console.log(chalk.red(err));
});
}
}
}