Open varHarrie opened 7 years ago
666
在step 3 npm run dev 之后:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
是因为webpack是1.0版本,需要升级的原因还是什么..?
@Wendy-bear 根据你的错误信息,你可以尝试:
resolve.fallback
和resolveLoader
删除extensions: ['', '.js', '.vue']
改为extensions: ['.js', '.vue']
thx.. 根据您的建议如此操作后,再接着出现类似的
configuration has an unknown property 'colors'.
configuration has an unknown property 'progress'.
这种无法解析的属性时都相应删掉后,该类报错得到解决~ 再次运行出现新的问题:
ERROR in multi (webpack)-dev-server/client?http://localhost:3800 webpack/hot/dev-server ./src/main.js
Module not found: Error: Can't resolve 'babel' in '/Users/wenxia/webpackVue'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'babel-loader' instead of 'babel',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
@ multi (webpack)-dev-server/client?http://localhost:3800 webpack/hot/dev-server ./src/main.js
You need to specify 'babel-loader' instead of 'babel', 相应去看了下是版本问题,现在不再支持缩写形式。在step 3 webpack.config/base.js
module: { // 配置loader
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' }, // 所有.vue结尾的文件,使用vue-loader
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } // .js文件使用babel-loader,切记排除node_modules目录
]
}
从此运行成功..
666~vue cli那个webpack模板虽然强大,但有些复杂,驾驭起来不足够顺手,还是自己造的“小轮子”得心应手。
为什么第二步没有结果?报错显示的是Vue is not a constructor
用 dawn ,三分钟搭建 react/vue 项目
npm i dawn -g
dn init -t vue
dn dev
好了,详细说明参考:https://github.com/alibaba/dawn/blob/master/README-zh.md
赞赞赞,顿悟, 中间有很多问题,主要是版本问题,慢慢都解决了。
第三步成功运行但是没有hello vue显示,控制台打印‘runtime only’,后来搜索了下找到这个地址:https://segmentfault.com/a/1190000006435886 ,修改webpack.config/dev.js 增加
resolve:{
alias: {
'vue': 'vue/dist/vue.js'
}
}
原因为
Vue 最早会打包生成三个文件,一个是 runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime + compiler 的文件 vue.js。
第三步的 5 有问题。
之前没有创建 src/index.js
,这里却用到了,是不是应该是 src/main.js
module.exports = merge(baseConfig, {
entry: [
'webpack/hot/dev-server', // 热替换处理入口文件
path.join(root, 'src/index.js')
],
devServer: { /* 同上 */},
plugins: [
new webpack.HotModuleReplacementPlugin() // 添加热替换插件
]
}
每一步的项目源码:这里
推荐vue项目目录结构:
第一步:初始化项目
所有项目的第一步当然是:创建项目文件夹,然后使用
npm init -y
创建package.json
项目根目录下建立
src
和dist
文件夹,分别用来存放项目源码
和webpack编译后的代码
第二步:入口文件
根目录
下直接建立一个index.html
,作为页面的入口文件src
下建立一个main.js
,作为Vue的入口文件安装Vue:
npm install vue@1 --save
安装Webpack:npm install webpack --save-dev
除非在全局安装
webpack
,使用本地安装需要在package.json
的script
加入运行脚本,添加之后package.json
如下:运行
npm run dev
,再用浏览器打开index.html
就能看到效果了:第三步:编写webpack配置文件
上一步中直接使用webpack运行脚本
webpack [入口文件] [出口文件]
,显然对于后期添加webpack插件和不同环境的配置是不行的。在项目根目录下创建
webpack.config
文件夹专门用于存放webpack的配置文件为了让配置文件不同的编译环境中能够复用(例如
loaders
的配置,不管在开发环境还是生产环境肯定都是一样的),在webpack.confg
中首先创建一个base.js
文件:上面这段配置就实现了
webpack src/main.js dist/main.js
的功能,还可以额外拓展一下,变成:根目录下添加
.babelrc
用于配置babel
:webpack.confg
创建dev.js
文件:上面的代码仅仅是导出了跟
base.js
一模一样的配置,下面我们添加更多用于dev
(开发环境)的配置。index.html
进行调试了修改配置文件为:
安装
webpack-dev-server
:npm install --save-dev webpack-dev-server
HtmlWebpackPlugin
,实现js入口文件自动注入最后修改后完整的
dev.js
请查看源码修改
index.html
,去掉入口文件的引入:package.json
中的webpack运行脚本为:为了测试webpack配置是否都生效了,下面创建一个vue组件
src/components/Hello.vue
:修改
main.js
:运行
npm run dev
,浏览器打开localhost:3000
查看结果:第四步:配置路由
安装
vue-router
:npm install --save vue-router@0.7
创建目录
在
src
目录下创建views
文件夹,用于存放页面组件 在src
目录下创建router
文件夹,用于存放所有路由相关的配置添加页面组件
src/views/Home.vue
:添加
src/router/routes.js
文件,用于配置项目路由:添加路由入口文件
src/router/index.js
:修改
main.js
:最后别忘了编辑
index.html
:重新执行
npm run dev
,浏览器打开localhost:3000
查看效果第五步:配置Vuex
安装
vuex
:npm install --save vuex@1
添加src/store
文件夹,存放vuex相关文件,添加src/store/modules
用于vuex分模块管理src/store/types.js
,vuex的所有mutation type
都放在一起,不建议分开多个文件,有效避免重名情况:counter
模块目录store/modules/counter
添加
store/modules/counter/actions.js
:添加
store/modules/counter/index.js
store/index.js
,作为vuex入口文件main.js
,将store引入并添加到App中:src/components/Hello.vue
,把action用上:第六步:配置eslint
.eslintrc
文件根目录下创建
.eslintrc
文件:结合不同编辑器的插件,打开js和vue文件中,就能看到提示了
第七步:webpack生产环境配置
前面已经配置过了开发环境下使用的配置文件
dev.js
,对于生产环境,通常需要对编译出来的文件进行压缩处理,提取公共模块等等,就需要专门提供一个配置文件webpack.config/pro.js
文件,把生产环境用不到的删掉,比如webpack-dev-server
、webpack-hot-replacement
在
package.json
中添加运行脚本:"build": "webpack --config webpack.config/pro.js"
运行
npm run build
,可以在dist
文件夹中看到打包好的文件完
“十分钟”只是噱头,多配几次,十分钟都不用。
轮子虽然都是圆的,也有轻重宽窄之分,造一辆车有时候也避免不了重造一个轮子。