vue webpack 起步配置loader

Posted 2021-08-28 鸟随二月

上一篇

目录标题

• 认识
• 安装
• 基本使用
• 配置
• • webpack.config.js配置
  • package.json配置
• loader 加载css
• webpack 处理less文件
• webpack 图片文件处理
• ES6转ES5的babel

相关代码

认识

简单来说，webpack就是将模块化的编程打包
webpack是一个现代的javascript应用的静态模块打包工具。

安装

基本使用

参考视频
总结:你可以先写.js文件，随便引入和导出（模块化），然后将最终的js 文件打包,在.html文件中引入打包好的文件即可

配置

webpack.config.js配置

package.json配置

当使用node相关东西时
npm init
生成package.json后如果有所依赖，则 npm install
然后打包的话 直接 webpack

其实一般打包使用 npm run build 运行的话使用 npm run serve
让两个打包对应起来
package.json修改如下（增加）

本地安装webpack

loader 加载css

可以参考

在main.js中加入css依赖（自己写的css文件）

// 3.依赖css文件
require('./css/normal.css')

安装相应的loader

npm install --save-dev css-loader

接下来配置webpack.config.js

安装style-loader

webpack 处理less文件

1.创建less文件

2.在main.js既然依赖

// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊,李银河!</h2>')

然后重新执行 npm run build 编译会出错，需要安装

3.配置webpack.config.js

4.然后重新编译完成

webpack 图片文件处理

1.建立文件图片

2.

3.安装下载器

4.配置webpack.config.js
类似前面的配置

所以需要安装 file-loader

然后配置webpack.config.js

如何index.html也在打包好的文件中的话不需要publicPath；

ES6转ES5的babel

1. 安装相应的loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2.配置webpack.config.js

3.打包编译 npm run build
下一篇