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安装和配置
官方网站: 代码托管: babel-loader参考: babel讲解参考阮一峰老师文章:
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-开头的)
cnpm 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，在，vue-loader是第三方加载器，第三方加载器全部入在
，这个加载器是由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 = '
'; 上面是webpack的一个很有用的功能，将图片当作模块直接require，如果没有安装url-loader会报语法错
ERROR in ./today/wang/home.jsModule 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 = "大奇模板 \t";
file-loader
作用:
参数:context: 如不配置，就使用全局的context，也就是webpack配置文件对象的contextname: '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
{ 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// 我个人喜欢standardmodule.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' }}