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)(\?.*)?$/, //字体文件 loader: 'url-loader', //使用url-loader处理 query: { limit: 10000, //字体文件小于1000字节的时候处理方式 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') //文件名为name.7位hash值.拓展名 } } ] }
注: 关于query 仅由于兼容性原因而存在。请使用 options 代替。
webpack.dev.conf.js
开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') module.exports = merge(baseWebpackConfig, {}）
模块配置
module: { //通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }
在util.styleLoaders中的配置如下
exports.styleLoaders = function (options) { var output = [] //定义返回的数组，数组中保存的是针对各类型的样式文件的处理方式 var loaders = exports.cssLoaders(options) // 调用cssLoaders方法返回各类型的样式对象(css: loader) for (var extension in loaders) { //循环遍历loaders var loader = loaders[extension] //根据遍历获得的key(extension)来得到value(loader) output.push({ // test: new RegExp('\\.' + extension + '$'), // 处理的文件类型 use: loader //用loader来处理，loader来自loaders[extension] }) } return output }
上面的代码中调用了exports.cssLoaders(options),用来返回针对各类型的样式文件的处理方式,具体实现如下
exports.cssLoaders = function (options) { options = options || {} var cssLoader = { loader: 'css-loader', options: { //options是loader的选项配置 minimize: process.env.NODE_ENV === 'production', //生成环境下压缩文件 sourceMap: options.sourceMap //根据参数是否生成sourceMap文件 } } function generateLoaders (loader, loaderOptions) { //生成loader var loaders = [cssLoader] // 默认是css-loader if (loader) { // 如果参数loader存在 loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { //将loaderOptions和sourceMap组成一个对象 sourceMap: options.sourceMap }) }) } if (options.extract) { // 如果传入的options存在extract且为true return ExtractTextPlugin.extract({ //ExtractTextPlugin分离js中引入的css文件 use: loaders, //处理的loader fallback: 'vue-style-loader' //没有被提取分离时使用的loader }) } else { return ['vue-style-loader'].concat(loaders) } } return { //返回css类型对应的loader组成的对象 generateLoaders()来生成loader css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } }
插件配置