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');

    }
},


};