vue webpack 起步配置loader

Posted 鸟随二月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue webpack 起步配置loader相关的知识,希望对你有一定的参考价值。

上一篇

相关代码

认识

简单来说,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
下一篇

以上是关于vue webpack 起步配置loader的主要内容,如果未能解决你的问题,请参考以下文章

Vue第五天学习笔记之webpack详解

webpack 4+ vue-loader 配置

Vue - webpack vue-loader 配置

vue 在webpack 环境下的 jquery使用

配置webpack loader vue 报错:Module build failed: TypeError: this._init is not a function

sh 配合Vue.js配置Webpack - 38. Webapck为.js文件配置babel-loader