vue-05-webpack安装-vue单文件启动

Posted 2021-01-10 bronk

1, webpack是什么

1), 是一个打包工具,

比gulp, grunt更先进 

2), 额外功能

项目部署上线, 清空目录等

hot module reload, 页面刷新后, 数据不变化

3), 打包流程

css, js等打包成bundle.js文件

js: babel-loader 来加载, 编译

最终根据依赖关系生成app.js

split point: 将大文件分割为多个文件, 提升用户体验

2, webpack安装

 1), 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2), 检查npm版本

npm -v

3), 安装webpack到全局

npm install webpack -g

4), 生成package.json

npm init

5), 为项目添加webpack依赖

npm install webpack --save-dev

6), 将js编译打包

webpack hello.js hello.bundle.js

7), 安装css的loader转换器和style的laoder转换器

npm install css-loader style-loader --save-dev

8), 文件变化时, 自动编译

webpack hello.js hello.bundle.js  --watch

 

3, 配置文件

webpack.json.js

# 引入webpack
const webpack = require(‘webpack‘);

# 遵循 commonjs规范
module.exports = {