Table of Contents
前天，跟着慕课网上jokcy老师的课程《Vue+Webpack打造todo应用》练习了Vue，学习了Webpack的使用。课程时长只有2小时23分钟，但我却花了十多个小时，实在羞惭。下面将记录学习中碰到的一些问题。因为完成课程是在昨天上午11点，已经有了些时间，可能无法将所有问题都记录下来。
文章最初分布在简书，时间为 2018.06.06 09:39 。这里只是搬运过来。
拼写错误
这算是非常低级的错误，但也是非常浪费时间的错误。比如在此次练习中，因为将 filter 写成 fliter，config 写成 cnofig ，浪费了好几个小时。
依赖版本问题
因为webpack和某些包的版本的问题，很多时候无法立即知道问题出在哪，只能不断百度、google排查，比较浪费时间。
1. vue-loader/lib/plugin
在 jokcy 老师的视频中是不需要在 webpack.config.js 文件中添加 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 这一句的，但在我的版本（webpack 4.10.2，vue 2.5.16，vue-loader 15.2.4）中是需要的。
2. webpack.optimize.CommonChunkPlugin
webpack4 已经弃用 webpack.optimize.CommonChunkPlugin API，需要改为 webpack.optimize.SplitChunksPlugin 。
更新：上面有误。正确的写法如下:
optimization: {
splitChunks: {
cacheGroups: {
lib: {
name: 'lib',
filename: 'js/[name].[chunkhash:8].js',
minChunks: 2,
chunks: 'initial'
}
}
}
}
这个 optimization 应该在 config 下面，和 entry 平级。
3. contentHash
因为 contentHash 和 webpack4 有冲突，所以需要将 new ExtractPlugin('styles.[contentHash:8].css'), 改为 new ExtractPlugin('styles.[hash:8].css'), 。当然，这不是最好的方法，最好的解决方案是使用 mini-css-extract-plugin 插件，而不是 extract-text-webpack-plugin 插件。
style-loader 和 css-loader 顺序问题
style-loader 要在 css-loader 前面。所以下面的写法是正确的：
{
test:/\.css$/,
use: [
'style-loader',
'css-loader'
]
},
而下面的是错误的：
{
test:/\.css$/,
use: [
'css-loader',
'style-loader'
]
},
对象中函数写法
也许我孤陋寡闻了，在练习中发现了如下写法：
export default {
data(){
return {
todos: [],
filter: 'all'
}
}
}
记得 vue 组件中的 data 应该是这样的：
data: function(){
return {
……
}
}
后来试了一下，发现对象中的函数（方法）是可以这样写的：
var obj = {
log(){
console.log('ddd');
}
};
obj.log() // 'ddd'
Vue 无法解析 stylus
在单文件组件中使用 stylus 无法解析。尚未知道如何解决，所以 TodoApp 中的单文件组件里的样式都是用原生 CSS 写的。
按照指定目录打包
教程中打包后的文件都集中在 dist 目录下，看起来很凌乱。可以在输出文件名中加入路径，让各种资源打包到指定的目录下面。比如，下面的代码将图片资源打包到 images 目录下：
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024,
name: 'images/[name]-aaa.[ext]'
}
}
}
外部 css 文件中图片路径问题
将 css 文件打包到 css 文件夹，图片打包到 images 文件夹，但 css 文件中的路径却是 “images/……”。很显然这不是我需要的。经过一番百度，找到了解决方法：
在入口处entry配置publicpath:”./”
同时一般css是单独打包，用到插件extract-text-webpack-plugin 其中有也有一个publicpath 可以重写原来的pp地址（具体可以看文档） 这里配置为相对路径../这里根据实际情况来判断，以上配置结束打包以后可以以本地file://的方式打开，产品环境可以将entry中的pp地址改成cdn服务器地址，这样就不用配置css打包插件里面的publicpath了
还有一只本地环境解决css中图片问题的方法，就是将entry中的pp地址改成绝对路径__dirname 此处会出现一个问题，反斜杠问题，通过正则表达式将所有的斜杠替换为/，在将他放入pp地址
Pp地址为publicpath
于是，我将配置文件修改了一下：
use: ExtractPlugin.extract({
fallback:'style-loader',
use:[
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
变成：
use: ExtractPlugin.extract({
fallback:'style-loader',
use:[
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
],
publicPath: '../'
})
It works!
成品
todo.jpg
链接：http://www.xn--jfs.top/apps/TodoApp/
That’s all !