webpack配置+vue页面案例

一.webpack的安装和配置
以下三步是webpack最基本的操作步骤了，这里只是讲了怎么进行操作，如果想知道webpack的配置每一步都在干嘛以及相关知识，可以参考以下两个链接资料：
webpack从零入门到工程化实战： https://www.imooc.com/read/29
webpack官方文档： https://www.webpackjs.com/guides/getting-started/

1.新建一个文件夹，作为项目文件夹。然后使用 npm init -y 对项目进行初始化（-y代表所有设置都采用默认，你也可以一项项去设置），这一步主要是生成一个 package.json 文件。package.json文件中主要有项目的基本信息和各种依赖包信息。
2.在项目文件夹下，新建一个 package.config.json 文件。package.config.json 是webpack的配置文件，在开发期间要不断进行修改添加。一开始不要着急，先添加好 entry【入口项】和 output【输出项】以及VueLoaderPlugin插件设置。'./src/index.js'， 'bundle.js'是我自己的个人设置，你也完全可以修改成其他的。
`
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}，
plugins: [
new VueLoaderPlugin()
]
}
`
3.安装vue项目必不可少的依赖包以及webpack，为了省去一个一个安装，我给大家提供我的package.json中依赖项的信息，大家可以直接对照自己的package.json文件进行修改或添加。然后在命令行下执行：npm install, 生产 node_modules 文件夹就是项目的依赖包文件夹了。

"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10"
}

二.vue项目案例
有了以上三个基本的webpack配置步骤了，就可以进行vue项目的编写了。父组件向子组件传值常用props属性，子组件向父组件以及兄弟组件传值一般用发送信号，监听信号的方式。基本每一个页面组件中都会用到这些，熟练掌握这个过程在编写页面过程当中是必不可少的。

1.css的webpack配置
样式文件一般包括 .css, .scss, .less, .sass等，这些方式css没有太大区别，只是增加了预处理以及用法也不同。在项目中使用css装饰组件必不可少，因此先介绍一下相关配置。我比较习惯用.scss，这里以.scss为例进行说明，其他的可以自行百度查一下相关配置。

// webpack.config.js中module.rules下增加这个规则
{
test:/.scss$/,
use:['style-loader','css-loader','sass-loader']
}

命令行下安装相应的loader包(npm不行，就用cnpm，不过要设置下载源链接)：
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install css-loaser --save-dev

2.兄弟组件之间的通讯
一个组件发送信号：
` `

另一个接收信号：
`javascript

`

Msg.js主要作为中间脚本，在两个组件之间传递信号：
import Vue from 'vue'
export default new Vue()
最终实现的效果如下：