webpack工作流

1.想实现一个按下anter键可以发送弹幕的功能，传统的script代码很简单

2.引入一个弹幕类

import canvasBarrage from './src/Canvas-barrage.js'

这个类用export default CanvasBarrage; node的模块化方案导出，浏览器会报错

SyntaxError: Unexpected identifier

为了封装性，易用性，代码的可读性，将弹幕的业务逻辑封装成一个类，并将其模块化

直接在浏览器端执行 export default;

import 模块化关键字，浏览器目前还不支持

如何用面向未来的编码风格，又编译通过

写的代码，compile babel 最后执行的代码不一样

那就要使用webpack

3. 如何使用webpack

1. npm init-y ------在项目目录下初始化项目

2.在package.json里添加配置，配置

webpack只支持本地JavaScript模块，但是很多人使用ES2015、CoffeeScript、TypeScript等的转译器。webpack的‘loaders’即可解决转译的问题。Loaders是特殊的模块，webpack用来加载其他的用别的语言写的模块到webpack可以识别的JavaScript中。例如，babel-loader使用Babel来加载ES2015文件。

配置babel的版本及babel预设处理，使webpack可以用babel编译js代码，已适应浏览器的要求

4.webpack取代live-server.

我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装cnpm install webpack-dev-server -g # 运行webpack-dev-server --progress --colors

5.创建及配置webpack配置文件

修改 webpack.config.js使得'babel-loader'来处理所有.js结尾的文件

其中exclude: /node_modules/配置是将node_modules文件下的内容排除在外，降低编译时间。

6.yarn 安装依赖 

会生成node_modules

7. npm run start 开启项目

---

弹幕制作