webpack配置+vue评论页面案例 JavaScript

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

新建一个文件夹，作为项目文件夹。然后使用 npm init -y 对项目进行初始化（-y代表所有设置都采用默认，你也可以一项项去设置），这一步主要是生成一个 package.json 文件。package.json文件中主要有项目的基本信息和各种依赖包信息。
在项目文件夹下，新建一个 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() ] }

安装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.兄弟组件之间的通讯 【webpack配置+vue评论页面案例】我主要想做到的就是在（1）输入框中输入评论内容，点击提交后在页面上方会进行展示；（2）能够保存之前的评论内容并展示；（3）点击评论内容，选中的内容变红色，再点击删除可删除选中的评论。这主要由两个兄弟组件的通讯来完成
（1）一个组件发送信号

> import Msg from './Msg.js'export default { data () { return { message: "" } }, methods: { sendMessage () { var content = this.message if(content) { Msg.$emit('hasComment', content) } }, clearComments () { Msg.$emit('clearComment') this.message = '' } } } ="scss"> .second{ width: 500px; margin: 0 auto; label{ color: #05f5f5; font-size: 25px; font-weight: bold; line-height: 30px; display: block; margin-top: 15px; margin-bottom: 15px; } textarea{ display: block; line-height: 20px; font-size: 15px; } .action{ padding-left: 100px; input { display: inline-block; width: 70px; height: 40px; font-size: 25px; font-weight: bold; margin: 15px 30px; } } }

（2）另一个兄弟组件接收信号：

> import Msg from './Msg.js'export default { data () { return { seen: false, id: 0, comments: [], } }, mounted: function () { Msg.$on('hasComment', content =>{ this.comments.push({ "id": ++this.id, "content": content, 'cleared': false }) this.seen = true }) Msg.$on('clearComment', () =>{ var _this = this this.comments = this.comments.filter((comment) => { return comment.cleared == false }) for(let i=0; i="scss"> .first{ width: 500px; margin: 0 auto; line-height: 30px; margin-top: 50px; h3{ font-size: 25px; margin: 10px 0; } p{ font-size: 20px; text-align: justify; margin-bottom: 20px; &:hover{ background-color: pink; } } .clicked { background-color: red; } }

（3）Msg.js主要作为中间脚本，在两个组件之间传递信号

import Vue from 'vue' export default new Vue()

3.webpack-dev-server本地服务器模式 webpack-dev-server是一个基于Express的本地开发服务器。因为前后端分离进行开发，为了能模拟服务器随时查看开发情况，需要用到webpack-dev-server。执行webpack-dev-server命令之后，它会读取webpack的配置文，然后将文件打包到内存中。打开server的默认地址：localhost:8080。

(1) 安装
npm install webpack-dev-server --save-dev
(2) 将webpack-dev-server放到package.json的scripts里面

{ "scripts": { "dev": "webpack-dev-server --model development" } }

(3) 配置html-webpack-plugin插件
要让webpack处理HTML页面，就需要使用html-webpack-plugin插件【如果不配置这个插件，直接启动webpack-dev-server, 看到的将是工作目录】。
安装：npm install html-webpack-plugin --save-dev
修改 webpack.config.js文件

const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { main: './src/index.js' }, plugins: [new HtmlWebPackPlugin()] };

配置完执行，就会自动生产一个index.html文件。但是这个index.html是webpack替我们自动生成的，实际当中我们可能想要其他的html样式。所以我们要添加自己的html页面。
修改 webpack.config.js文件

const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { main: './src/index.js' }, plugins: [ new HtmlWebPackPlugin({ template: './src/index.html' }) ] };