webpack 基本使用

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 ,用来编写单文件组件

　　　　作用：

1. 允许vue 组件的每个部分只用其他的 webpack loader ，例如在<style>的部分使用sass和在<template>的部分使用pug
2. 允许在一个vue文件中使用自定义块并对其使用自定义的 loader 链
3. 使用webpack loader 将<style> 和<template> 中应用的资源当作模块依赖来处理
4. 为每个组件模拟出scoped css
5. 在开发过程中使用热重载来保持状态

　　开发环境：-save-dev

　　生产环境：--save

webpack 基本使用

原文：https://www.cnblogs.com/xuedong1103/p/11980892.html