webpack资源处理
程序员文章站
2022-05-09 16:18:15
使用上篇已谈过，这篇纯代码！！~~ bable要使用必须加入如下配置： ......
使用上篇已谈过，这篇纯代码！！~~
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <!-- <script src="../dist/bundle.js"></script> --> <!-- <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"> --> </head> <body> <div class="box"></div> <div class="box2"></div> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> </body> </html>
{
"name": "01.webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot"
},
"keywords": [],
"author": "",
"license": "isc",
"devdependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"bootstrap": "^3.3.7"
}
}
bable要使用必须加入如下配置：
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
// 由于 webpack 是基于node进行构建的，所有，webpack的配置文件中，任何合法的node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlwebpackplugin = require('html-webpack-plugin')
// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
plugins: [ // 所有webpack 插件的配置节点
new htmlwebpackplugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
})
],
module: { // 配置所有第三方loader 模块的
rules: [ // 第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 css 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 babel 来转换高级的es语法
]
}
}
// 项目的js入口文件
console.log('ok')
import './css/index.css'
import './css/index.scss'
// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'
// class 关键字，是es6中提供的新语法，是用来 实现 es6 中面向对象编程的方式
class person {
// 使用 static 关键字，可以定义静态属性
// 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
// 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
static info = { name: 'zs', age: 20 }
}
// 访问 person 类身上的 info 静态属性
console.log(person.info)
// 在 webpack 中，默认只能处理 一部分 es6 的新语法，一些更高级的es6语法或者 es7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
// 通过 babel ，可以帮我们将 高级的语法转换为 低级的语法
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -d
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -d
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
// 2.2.1 如果 不排除 node_modules， 则babel 会把 node_modules 中所有的 第三方 js 文件，都打包编译，这样，会非常消耗cpu，同时，打包速度非常慢；
// 2.2.2 哪怕，最终，babel 把 所有 node_modules 中的js转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的 根目录中，新建一个 叫做 .babelrc 的babel 配置文件，这个配置文件，属于json格式，所以，在写 .babelrc 配置的时候，必须符合json语法规范： 不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思
// {
// "presets": ["env", "stage-0"],
// "plugins": ["transform-runtime"]
// }
// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的es语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法
// java c# 实现面向对象的方式完全一样了， class 是从后端语言中借鉴过来的， 来实现面向对象
// var p1 = new person()
// function animal(name){
// this.name = name
// }
// animal.info = 123
// var a1 = new animal('小花')
// // 这是静态属性：
// // console.log(animal.info)
// // 这是实例属性：
// console.log(a1.name)