main.js
// 导入jquery
// ES6中导入其他模块的方式
// 由于ES6 语法太高级 浏览器不支持这句语法
import $ from 'jquery'
// 使用import导入本地的css样式表 注意webpack只能打包js文件不能打包其他文件
// 如果要处理非js文件, 需要手动安装第三方loader加载器
// 1. 如果想要打包css文件, 需要安装 npm i style-loader css-loader -D
// 2. 打开webpack.config.js文件, 在里面新增一个配置节点, 叫做module, 他是一个对象,
// 在这个module对象身上, 有个rules属性, 这个rules属性是个数组, 在这个数组中, 存放了
// 所有第三方文件的匹配和处理规则
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 如果要通过路径导入node_modules中相关的文件, 可以省略node_modules也可以, 默认查找
import 'bootstrap/dist/css/bootstrap.css' // bootstrap有字体不能识别需要装插件
// class 关键字, 是ES6中提供的新语法, 是用来实现ES6中面向对象编程的方式
class Person{
// 使用static关键字 可以实现静态属性
static info = {name: 'zs', age: 20}
}
console.log(Person.info)
// 在webpack中默认只能处理一部分ES6语法 需要借助第三方loader
// 通过Babel, 可以帮助我们将高级语法转化为低级语法
// 1.需要安装两套包
// 第一套包 npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
// 第二套包 npm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开webpack.config.js, 在module节点下配置rules
// {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
// 3. 在项目的根目录中新建一个叫.babelrc 的Babel 配置文件
// 写如下配置 presets翻译为语法
// {
// "presets": ["env", "stage-0"],
// "plugins": ["transform-runtime"]
// }
webpack.png
webpack.config.js
const path = require('path');
// 导入在内存中生成的HTML插件 只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
// 这个配置文件, 其实就是一个js文件, 通过node 中的模块操作, 向外暴露了一个配置对象
module.exports = {
// 在配置文件中, 需要手动的指定入口和出口
entry: path.join(__dirname, './src/main.js'), // 入口, 表示webpack要打包那个文件
output: {
path: path.join(__dirname, './dist'), // 指定打包好的文件, 放在那个目录中去
filename: 'bundle.js', // 这里是指输出的文件名称
},
mode: 'production',
plugins: [
new htmlWebpackPlugin({ //创建一个在内存中生成html插件
template: path.join(__dirname, './src/index.html'), // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
filename: 'index.html' // 指定生成内存中的页面
})
],
module: { // 这个节点用于配置所有的第三方模块的匹配规则
rules: [ // test是正则 use是用哪个第三方模块来处理
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css文件的第三方规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置处理.less后缀的文件
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理.scss后缀文件
// limit限制图片大小 处理图片路径的loader ?& 传参 单位是byte 如果我们引用的图片大于或者等于给定的LIMIT的值
// 则不会被转为base64字符串, 否则相反 [name].[ext] 之前叫什么名现在还叫什么名字 [hash:8]-前面用8位hash值
{ test: /\.jpg|png|gif|bmp|svg|jpeg$/, use: 'url-loader?limit=500&name=[hash:8]-[name].[ext]' },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 处理字体文件的loader
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/} // 用于处理ES6 的高级语法转化低级语法
]
},
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
};
