在开始写 webpack.base.conf.js(简称 base) 之前, 我们先来看一下 vue-loader.conf.js 这个文件, 毕竟在 base 中我们还会用到:
- use strict
- // 引入前一篇文章的 utils 文件
- const utils = require(. / utils)
- // 引入 config 文件
- const config = require(.. / config)
- // 判断当前是否为生产环境, 如果是则返回 true
- const isProduction = process.env.NODE_ENV === production
- // 是否使用 sourceMap, 如果是生产环境就使用 config 文件中 index.js 中生产环境的配置, 否则是否开发环境的配置
- const sourceMapEnabled = isProduction ? config.build.productionSourceMap: config.dev.CSSSourceMap module.exports = {
- //utils 文件 cssLoaders 返回的配置项, 返回的格式为
- /*
- loaders:{
- css:ExtractTextPlugin.extract({
- use: [cssLoader],
- fallback: vue-style-loader
- }),
- postCss:{
- .......
- }
- }
- */
- loaders: utils.cssLoaders({
- sourceMap: sourceMapEnabled,
- extract: isProduction
- }),
- // 是否使用 sourceMap
- cssSourceMap: sourceMapEnabled,
- // 是否使用 cacheBusting, 这个配置在 config 的文章中提到过
- cacheBusting: config.dev.cacheBusting,
接下来, 我们来看 webpack.base.conf.js 文件
- const path = require(path) const utils = require(. / utils) const config = require(.. / config) const vueLoaderConfig = require(. / vue - loader.conf)
- //resolve 函数返回根路径下的文件或文件夹
- function resolve(dir) {
- return path.join(__dirname, .., dir)
- }
- module.exports = {
- // 返回根路径
- context: path.resolve(__dirname, .. / ),
- // 设置入口文件
- entry: {
- app: . / src / main.js
- },
- // 出口文件
- output: {
- // 根据 config 模块得知是根目录下的 dist 文件夹
- path: config.build.assetsRoot,
- filename: [name].js,
- // 公共路径, 统一为 /
- publicPath: process.env.NODE_ENV === production ? config.build.assetsPublicPath: config.dev.assetsPublicPath
- },
- resolve: {
- // 自动解析的扩展, js,vue.json 这三种格式的文件引用时不需要加上扩展了
- // import File from ../path/to/file
- extensions: [.js, .vue, .json],
- alias: {
- // 精准匹配, 使用 vue 来替代 vue/dist/vue.esm.js 路径
- vue$: vue / dist / vue.esm.js,
- // 使用 @替代 src 路径, 当你引入 src 下的文件是可以使用 import xx from "@/XX.js"
- @: resolve(src),
- }
- },
- module: {
- rules: [
- //vue-loader,module 里的配置可以查看 webpack 文档
- {
- test: /\.vue$/,
- loader: vue - loader,
- options: vueLoaderConfig
- },
- {
- test: /\.js$/,
- loader: babel - loader,
- include: [resolve(src), resolve(test), resolve(node_modules / webpack - dev - server / client)]
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: url - loader,
- options: {
- limit: 10000,
- name: utils.assetsPath(img / [name]. [hash: 7]. [ext])
- }
- },
- {
- test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
- loader: url - loader,
- options: {
- limit: 10000,
- name: utils.assetsPath(media / [name]. [hash: 7]. [ext])
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: url - loader,
- options: {
- limit: 10000,
- name: utils.assetsPath(fonts / [name]. [hash: 7]. [ext])
- }
- }]
- },
来源: http://www.bubuko.com/infodetail-2494744.html