vue-cli中的webpack配置详解

版本号

vue-cli 2.8.1 (终端通过vue -V 可查看)
vue 2.2.2
webpack 2.2.1

目录结构

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── dev-client.js
│  ├── dev-server.js
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── Hello.vue
│  └── main.js
└── static

webpack配置

主要对build目录下的webpack配置做详细分析

webpack.base.conf.js

入口文件entry

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

输出文件output

config的配置在config/index.js文件中

output: {
 path: config.build.assetsRoot, //导出目录的绝对路径
 filename: '[name].js', //导出文件的文件名
 publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath : config.dev.assetsPublicPath //生产模式或开发模式下html、js等文件内部引用的公共路径
}

文件解析resolve

主要设置模块如何被解析。

resolve: {
 extensions: ['.js', '.vue', '.json'], //自动解析确定的拓展名,使导入模块时不带拓展名
 alias: {  // 创建import或require的别名
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src')
 }
}

模块解析module

如何处理项目不同类型的模块。

module: {
 rules: [
  {
   test: /.vue$/, // vue文件后缀
   loader: 'vue-loader', //使用vue-loader处理
   options: vueLoaderConfig //options是对vue-loader做的额外选项配置
  },
  {
   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处理
   query: { // query是对loader做额外的选项配置
    limit: 10000, //图片小于10000字节时以base64的方式引用
    name: utils.assetsPath('img/[name].[hash:7].[ext]') //文件名为name.7位hash值.拓展名
   }
  }，
  {
   test: /.(woff2?|eot|ttf|otf)(?.*)?$/, //字体文件								 
 1/6    1 2 3 4 5 6 下一页 尾页