学习vue的过程中，使用了官方提供的模板webpack-simple，参照了github的demo一步步做的。完成了几个小模块后，发现对vue应用不断熟悉，但是配置这里还是很难理解，于是学习webpack官网，决定自己从webpack配置做起，逐步搭建个人项目
配套项目地址（不断完成中）：github.com/GMfight/my-…
第一部分 webpack搭建web项目
1 创建目录my-pj5 打开命令行执行npm init，生成package.json文件
2 安装webpack-cli，创建webpack.config.js文件
2.1）添加entry，output配置
entry:{ main:['./src/index.js']},
output:{ filename:'[name].bundle.js', path:'/'},复制代码
index.js代码
console.log('this is my index page test')复制代码
2.2） 在package.json中添加npm执行脚本
"scripts": { "dev":"webpack --config webpack.dev.config.js",}复制代码
执行脚本npm run dev后，会在目录下生成编译文件main.js
2.3） 在webpack.dev.config.js文件plugins下添加：
new HtmlWebpackPlugin({
title:'note book'
})复制代码
执行脚本npm run dev后，dist目录下可以生成index.html和min.js，且main.js会自动注入index.html。打开index.html文件可访问页面
2.4）安装webpack-dev-server包：
在webpack.dev.config.js文件下添加：
devServer:{
clientLogLevel:'info', //日志输出
host:'localhost', //访问ip
port:8085, //端口
open:true, //是否自动打开浏览器
}复制代码
在package.json下修改脚本
"scripts": {
"dev":"webpack-dev-server --config webpack.dev.config.js"
}复制代码
执行脚本后，浏览器自动打开，访问http://localhost:8085，访问到页面
2.5） 在webpack.config.dev.js，plugins下添加
new webpack.HotModuleReplacementPlugin()复制代码
文件修改时，会自动编译，自动刷新浏览器
想要同时使用loclahost和ip访问时，在devServer中修改配置
host:'0.0.0.0',复制代码第二部分 添加vue相关配置
3.1下载vue安装包，在webpack.dev.config.js文件中配置
new HtmlWebpackPlugin({
title:'note book',
template:'template.html'
}),复制代码
会以template配置的html文件为模板自动生成index.html文件，并将编译好的js，css注入。
template配置的文件需要为vue提供挂载元素
3.2 配置入口文件，index.js
var vm=new Vue({
el:'#app',
components:{
'ss':{
template:'我是局部组件1
'
}
},
template:'
el：指定index.html中的挂载元素
template：指定渲染到挂载元素的内容（参照 官网，有template配置，需要渲染的，应当引用含有编译器vue包；使用render函数的可以只引用运行时vue包）
components：指定组件
3.2.1 项目引用的vue包在webpack.dev.config.js中配置
resolve:{
extensions:['.js','.json'],,
alias:{
'vue$':'vue/dist/vue.common.js'
}
}复制代码
3.3 使用iframe实时更新和刷新配置
在webpack.dev.config.js中
devServer:{
inline:false,
hot:false,
},
plugins:[ new webpack.HotModuleReplacementPlugin()]复制代码
访问 http://localhost:8085/webpack-dev-server/index.html 修改template.html及其它文件，可自动更新代码，刷新浏览器
3.4 使用inline实时更新和刷新配置
devServer:{
inline:true,
hot:true,
},
plugins:[ new webpack.HotModuleReplacementPlugin()]复制代码
访问 http://localhost:8085 修改template.html，自动编译，不刷新浏览器；修改其它文件，可自动更新代码，刷新浏览器
4.为支持单文件组件.vue，需要做配置
下载vue-loader，在webpack.dev.config.js中
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module:{
rules:[ {
test:/\.tsx?$/,
loader:'vue-loader',
exclude:/node_modules/
}, {
test:/\.(ts|tsx)?$/,
loader:'ts-loader',
options:{
appendTsSuffixTo:[/\.vue$/], //为script有lang='ts'标识的脚本文件添加ts后缀
}
}, ]
},
plugins:[ new VueLoaderPlugin()]复制代码5.为支持scss，需要安装并配置样式loader
需要安装包
"css-loader": "^1.0.1",
"node-sass": "^4.10.0", //sass-loader依赖于node-sass
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1", //将编译得到的css文件插入style标签内复制代码
webpack.dev.config.js中
{
test:/\.(css|scss)$/,
loaders:['style-loader','css-loader','sass-loader'], //需要注意顺序
exclude:/node_modules/
}
复制代码第三部分 引入typescript
6.typescript配置
安装typescript,ts-loader
//package.json
"ts-loader": "^5.3.0", //将ts转化为javascript
"typescript": "^3.1.6",复制代码
在webpack.dev.config.js中添加配置
resolve:{
extensions:['.js','.json','.tsx','.ts','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
module:{
rules:[{
test:/\.(ts|tsx)?$/,
loader:'ts-loader',
options:{
appendTsSuffixTo:[/\.vue$/], //为script有lang='ts'标识的脚本文件添加ts后缀
}
}]
}复制代码
创建单文件组件时，如app.vue
复制代码
创建单文件组件有两种方式 vue.extends或者decorator
项目写到哪里，文档更到哪里，还有一些比较零碎的页面交互，设计之类的，没有整理，之后发
欢迎交流指正