webpack (模块化打包机)基本使用流程:
- 安装:cnpm install webpack webpack-cli -D
- 创建 src/index.js 文件作为入口文件
- 创建 webpack.config.js 文件,当前文件的作用是webpack 默认的配置文件。
- 打包的命令:npx webpack
- html-webpack-plugin 用于生成html文件并自动引入.js 等的文件
- clean-webpack-plugin 用于重新生成dist文件
- 当处理js 文件的时候所需要安装的loader
cnpm install @babel/core babel -loader @babel/present-env -D
- 处理css文件所需的loader
cnpm install css-loader style-loader sass-loader node-sass -D
- 处理图片的loader
cnpm insatll url-loader file-loader -D
url-loader 会将文件转换成base64的形式,适合打包较小的文件
file-loader 将文件打包成文件原有的类型,适合打包大文件
vue-loader的作用:
vue-loader 是一个webpack 的loader ,用来编写单文件组件
作用:
- 允许vue 组件的每个部分只用其他的 webpack loader ,例如在<style>的部分使用sass和在<template>的部分使用pug
- 允许在一个vue文件中使用自定义块并对其使用自定义的 loader 链
- 使用webpack loader 将<style> 和<template> 中应用的资源当作模块依赖来处理
- 为每个组件模拟出scoped css
- 在开发过程中使用热重载来保持状态
开发环境:-save-dev
生产环境:--save