extensions: [".js", ".vue", ".json"],
//配置别名映射
alias: {
// import Vue from 'vue/dist/vue.esm.js'可以写成 import Vue from 'vue'
// 键后加上$,表示精准匹配！
vue$: "vue/dist/vue.esm.js",
"@": resolve("src"),
utils: resolve("src/utils"),
components: resolve("src/components"),
public: resolve("public")
}
},
module: {
//处理模块的规则(可在此处使用不同的loader来处理模块！)
rules: [
//使用babel-loader来处理src下面的所有js文件,具体babel配置在.babelrc,主要是用来转义es6
{
test: /.js$/,
use: {
loader: "babel-loader"
},
include: resolve("src")
},
//使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于8192字节(8kb)的图片转为DataURL(base64),
//大于limit字节的会调用file-loader进行处理！
//图片一般发布后都是长缓存,故此处文件名加入hash做版本区分!
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 8192,
name: assetsPath("img/[name].[hash:8].[ext]")
}
}
] }
};
八.构建 build/webpack.dev.conf.js
8.1 该文件主要用于构建开发环境
8.2
"use strict";
//引入node path路径模块
const path = require("path");
//引入webpack
const webpack = require("webpack");
//引入webpack开发环境配置参数
const devConfig = require("../config").dev;
//引入webpack基本配置
const baseConf = require("./webpack.base.conf");
//一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似！
const merge = require("webpack-merge");
//一个创建html入口文件的webpack插件！
const HtmlWebpackPlugin = require("html-webpack-plugin");
//一个编译提示的webpack插件！
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
//发送系统通知的一个node模块！
const notifier = require("node-notifier");
//将webpack基本配置与开发环境配置合并！
const devConf = merge(baseConf, {
//项目出口,webpack-dev-server 生成的包并没有写入硬盘,而是放在内存中！
output: {
//文件名
filename: "[name].js",
//html引用资源路径,在dev-server中,引用的是内存中文件！
publicPath: devConfig.publicPath
},
//生成sourceMaps(方便调试)
devtool: devConfig.devtoolType,
//
//启动一个express服务器,使我们可以在本地进行开发！！！
devServer: {
//HMR控制台log等级
clientLogLevel: "warning",
// 热加载
hot: true,
//自动刷新
inline: true,
//自动打开浏览器
open: true,
//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
