飞道的博客

vue webpack 起步、配置、loader

405人阅读  评论(0)

上一篇

相关代码

认识

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


转载:https://blog.csdn.net/feiqipengcheng/article/details/116421861
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场