webpack目录
- 第1课: 安装webpack和webpack-dev-server
- 第2课: 配置文件
- 第3课: 做为node的一个模块来使用
- 第4课: 插件篇
- 第5课: 模块篇
- 第6课: 在Vue开发中使用webpack
本文参考文档
模块总览
- babel-loader
- vue-loader
- url-loader+file-loader
- html-loader
- postcss-loader + css-loader + style-loader
console.log('我是首页');
document.write("万事开头难")
const AA = {
name:'张学友',
city: '香港'
}
const BB = {
...AA,
age:40,
song:'吻别'
}
document.write(BB.name)
必装loader_1: babel安装和配置
官方网站: http://babeljs.io/
代码托管: https://github.com/babel/babel
babel-loader参考: https://webpack.js.org/loader...
babel讲解参考阮一峰老师文章: http://www.ruanyifeng.com/blo...
A: 安装
01:安装babel核心
babel核心是必装,如果在命令行下工作,还得安装babel-cli,babel-loader其实是就调用的它cnpm i babel-core -D
02:安装babel-loader
babel-loader是webpack中的一个专为babel写的加载器cnpm i babel-loader -D
03:安装babel预置
babel有很多预置,不同的预置有不同的功能,在https://github.com/babel/babel/tree/master/packages
中可以看到,有很多预置(以babel-preset-开头的)
对于es2015,es2016,es2017,env,stage-0,stage-1,stage-2,stage-3的理解,可参考https://www.cnblogs.com/chris...,为了方便,我使用env和stage-0,它包括其它几个stagecnpm i babel-preset-env babel-preset-stage-0 -D
04:安装babel插件
比如我想用对象的rest属性和spread属性,如下例子
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
得安装插件transform-object-rest-spread http://babeljs.io/docs/plugins/transform-object-rest-spread/
cnpm i babel-plugin-transform-object-rest-spread -D
B: 配置
主要是将上面安装的预置和插件放到配置文件中
方式一: 单独的.babelrc文件或.babelrc.js
{
"presets": [ "env", "stage-0"],
"plugins": [ "transform-object-rest-spread"]
}
方式二:在项目的package.json中
{
"name": "webpack2017",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"abc": "webpack --config ./build/webpackfile.js",
"kkkk": "webpack-dev-server --config ./build/webpackfile.js --hot",
"tttt": "node build/build.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"webpack": "^3.10.0"
},
"babel" :{
"presets": [ "env", "stage-0"],
"plugins": [ "transform-object-rest-spread"]
}
}
vue-loader
因我是用vue开发的,不是react来开发应用的,所以这里只讲vue,在https://webpack.js.org/loader...,vue-loader是第三方加载器,第三方加载器全部入在
https://github.com/webpack-co...,这个加载器是由vue官方维护,地址是:https://github.com/vuejs/vue-...
文档 :https://vue-loader.vuejs.org/...
代码托管: https://github.com/vuejs/vue-...
说明1:vue-loader是为vue服务的,前提是你安装了vue
1.安装
url-loader
作用: 对将图片|视频音频|字体进行base64编码,它有一个参数limit来决定是否要将文件进行base64编码,当不用编码时,就调用file-loader进行后续处理
在js文件中直接使用图片
//下面代码放在 D:\03www2018\study\webpack2018\today\wang\home.js
//logo.jpg放在 D:\03www2018\study\webpack2018\today\images/logo.jpg
var imgUrl = require('../images/logo.jpg'),
document.body.innerHTML = '<img src="'+imgUrl+'" />';
上面是webpack的一个很有用的功能,将图片当作模块直接require,如果没有安装url-loader会报语法错
ERROR in ./today/wang/home.js
Module build failed: SyntaxError: D:/03www2018/study/webpack2018/today/wang/home.js: Unexpected token, expected ; (21:8)
在https://webpack.js.org/loaders/
下找到url-loader,看看它的用法
01:安装url-loader,cnpm i url-loader file-loader -D
当没有设limit选项,或设了limit时但图片的大小小于limit,这两种情况才会将图片转为base64数据,不满足这两个条件,图片还是使用file-loader来处理
01:配置url-loader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
html-loader
作用:将html文件中图片`<img src='logo.jpg' />,替换成require(".logo.jpg")的方式导入,如
模板文件中<img src='logo.jpg' data-src123='logo.jpg' />
,配置文件中{test: /\.html$/, use: {loader: 'html-loader',options: { attrs: [':data-src123']}}}
也就是attrs中的配置与模板中data属性一致时,会以require()的方式导入图片,模板中没有设置相应data属性的图片,html-loader忽略,不当作模块加载,html-loader最后返回的值是这样的
module.exports = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"> <title>大奇模板</title> </head> <body> \t<img src='../images/logo.jpg' data-src123='" + require("logo.jpg") + "' /> </body></html>";
file-loader
作用:
参数:
context: 如不配置,就使用全局的context,也就是webpack配置文件对象的context
name: 'huang/img/[name].[hash:7].[ext]'
regExp:
outputPath:'zhangsan/lisi/', //可以是字符串,也可以是函数,后面的/不能省
useRelativePath:true|false,是否使用相对路径
// 最后生成完整文件名是 context+ outputPath + name
必装loader之eslint-loader
安装: cnpm i -D eslint eslint-loader
注意:如果同时使用babel-loader和eslint-loader,得先执行eslint-loader,否则会出错,正确的顺序如下
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader",
"eslint-loader", // 顺序是 自底向上执行
],
},
保险的做法是,将eslint单独配置
{
test: /\.js$/, // 对js文件使用eslint来检查代码的规范
loader:'eslint-loader',
enforce: 'pre', // 但为了保险,建议单独给eslint-loader指定pre值,有关loader的优先级,参考https://webpack.js.org/configuration/module/#rule-enforce
include: [path.resolve('src')], // 只有些目录下的js文件才使用eslint-loader
options: {
}
},
eslint配置文件
eslint在执行是会寻找它的配置,它的配置放在哪里呢?
一般放在package.json的eslintConfig部分,也可以单独放在 .eslintrc.*的文件中,如.eslintrc.js
下面以放在package.json中为例
{
"name": "webpack2017",
"devDependencies": {
},
"eslintConfig": {
"root": true,
"parserOptions": {
"sourceType": "module"
},
"extends": "standard",
"env": {
"browser": true
},
"rules": {
"generator-star-spacing": "off"
}
}
}
但放在package.json,不是很方便,建议放在.eslintrc.js中,只要输出一个对象就行,写起来比较灵活,如
// https://eslint.org/docs/user-guide/configuring
// 请先安装本配置文件依赖的模块,cnpm i -D babel-eslint eslint-plugin-html
// airbnb规则要装 cnpm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
// standard规则要装 cnpm i -D eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
// 我个人喜欢standard
module.exports = {
root: true,
parser: 'babel-eslint', // 默认的解析器为espree,这里指定为 babel-eslint,参考 https://github.com/babel/babel-eslint
parserOptions: { // 解析器的选项,默认支持 ECMAScript 5
sourceType: 'module'
},
env: {
browser: true, // 环境定义为浏览器
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard', // 使用哪个规则文件,可选 的有standard|airbnb eslint-config-airbnb(它需要安装 eslint-plugin-import,eslint-plugin-jsx-a11y, eslint-plugin-react)
// required to lint *.vue files
plugins: [ //第3方插件 eslint-plugin-html,
'html'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。