vue-cli+webpack打包配置

上一篇说的是 webpack打包生成测试和生产版本; 这篇说的这个配置 应该是在打包之前应该配置好的

webpack配置如下:

1. webpack.base.conf.js

入口文件 entry 代码如下:

entry: {
  app: ‘./src/main.js‘
}

输出文件 output 代码如下:

output: {
  path: config.build.assetsRoot,  // 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹
  filename: ‘[name].js‘,  // 导出文件的文件名
  publicPath: process.env.NODE_ENV === ‘production‘
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}

整体代码

‘use strict‘;
const path = require(‘path‘);
const utils = require(‘./utils‘);
const config = require(‘../config‘);
const vueLoaderConfig = require(‘./vue-loader.conf‘);

function resolve (dir) {
  return path.join(__dirname, ‘..‘, dir);
}
/*
 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件),使用eslint进行文件语法检测。
*/
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: ‘eslint-loader‘,
  enforce: ‘pre‘,
  include: [resolve(‘src‘), resolve(‘test‘)],
  options: {
    formatter: require(‘eslint-friendly-formatter‘),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
});

module.exports = {
  entry: {
    app: ‘./src/main.js‘
  },
  output: {
    path: config.build.assetsRoot, // 导出目录的绝对路径
    filename: ‘[name].js‘, // 导出文件的文件名
    publicPath: process.env.NODE_ENV === ‘production‘
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  // 设置模块如何被解析
  resolve: {
    // 自动解析确定的扩展名,导入模块时不带扩展名
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],

    // 创建import 或 require的别名
    /*
     比如如下文件
     src
       components
         a.vue
       router
         home
           index.vue
      在index.vue里面,正常引用A组件;如下:
      import A from ‘../../components/a.vue‘;
      如果设置了 alias后,那么引用的地方可以如下这样了
      import A from ‘@/components/a.vue‘;
      注意:这里的 @ 起到了 resolve(‘src‘)路径的作用了。
    */
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘)
    }
  },
  module: {
    rules: [
      // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件),使用eslint进行文件语法检测。
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,  // vue 文件后缀的
        loader: ‘vue-loader‘, // 使用vue-loader处理
        options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码
      },
      {
        test: /\.js$/, // js文件后缀的
        loader: ‘babel-loader‘, // 使用babel-loader处理
        include: [resolve(‘src‘), resolve(‘test‘)] // 包含src和test的文件夹
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀
        loader: ‘url-loader‘,  // 使用url-loader处理
        options: {
          limit: 10000,  // 图片小于10000字节时以base64的方式引用
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)  // 文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音频文件后缀
        loader: ‘url-loader‘,
        options: {
          limit: 10000, // 小于10000字节时的时候处理
          name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘) // 文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件
        loader: ‘url-loader‘,
        options: {
          limit: 10000, // 字体文件小于10000字节的时候处理
          name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘) // 文件名为name.7位hash的值.扩展名
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it‘s native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: ‘empty‘,
    fs: ‘empty‘,
    net: ‘empty‘,
    tls: ‘empty‘,
    child_process: ‘empty‘
  }
};

对webpack.base.conf中的 const vueLoaderConfig = require(‘./vue-loader.conf‘);

vue-loader.conf.js 代码如下:

原文地址:https://www.cnblogs.com/ljh--/p/9447980.html

时间: 2024-11-05 18:31:57

vue-cli+webpack打包配置的相关文章

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

vue 一些webpack的配置详解

最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基础上改的 PanJiaChen/vueAdmin-template vuex 咋web上我觉得是鸡肋 , 用户刷新页面直接就没了........... 这是我的目录 , 现在我遇到一个瓶颈  , 就是如何优化 build 的速度问题 , 这个问题随着页面原来越多已经发展到越来越恐怖的地方了现在打包一

vue cli 3.x 配置使用 sourceMap

项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.config.js 2.vue.config.js内容如下: module.exports = { css: { sourceMap: true, // 开启 CSS source maps } } 记得要停止项目,再重新运行项目 npm run serve 不然你以为没有生效,以为我在忽悠你,根本没作

Vue之webpack打包

第一次打包,还成功了,可能也是运气问题吧,因为自己在百度的时候发现很多人都打包有问题,现在我就讲述下我的打包配置 1.第一步,在build/utils.js中添加:publicPath:"../../", 如下所示: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:"../../", fallback: 'vue-style-loader' }) }

vue 之webpack打包工具的使用

一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚至是图片资源:并且由于组件化,这些.vue文件之间还有错综复杂的关系.所以项目要被浏览器识别,我们就要使用webpack将它们打包成js文件以及相应的资源文件. 二.webpack的功能? 1.它可以吧CSS,JS图片当做模块来处理 2.它可以吧以上的这些文件进行打包压缩成一个JS文件,减少了

vue用webpack打包时引入es2015插件

1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 2.修改[webpack.config.js]配置文件找到 /\.js$/的rules,进行修改 { test: /\.js$/, use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }], exclude: /node

webpack基本打包配置流程

项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件 在APP文件夹下新建两个js文件:a,js   b.js   (当项目级别如react项目,可以根据需求创建components文件夹等等,用于更好地管理模块化项目) APP/index.html <!DOCTYPE html> <html> <head> <

深入理解webpack基本配置(一)

1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简单的来),就会生成一个package.json文件. 在项目中直接运行如下命令,就可以把webpack安装到全局去:如下命令: npm install -g webpack 2. 安装webpack到本项目. 在本项目中,执行如下命令,就可以把webpack安装到本地项目中,如下命令: npm in

@vue/cli 3 安装搭建及 webpack 配置

首先卸载旧版1 npm uninstall vue-cli -g //or 2 yarn global remove vue-cli 再次安装 1 npm install -g @vue/cli 2 //or 3 yarn global add @vue/cl 查看版本 vue --version //or vue -V 创建项目vue create  my-project //项目名// Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作.  //你必须通过