main.js
// 導(dǎo)入jquery
// ES6中導(dǎo)入其他模塊的方式
// 由于ES6 語(yǔ)法太高級(jí) 瀏覽器不支持這句語(yǔ)法
import $ from 'jquery'
// 使用import導(dǎo)入本地的css樣式表 注意webpack只能打包js文件不能打包其他文件
// 如果要處理非js文件, 需要手動(dòng)安裝第三方loader加載器
// 1. 如果想要打包c(diǎn)ss文件, 需要安裝 npm i style-loader css-loader -D
// 2. 打開(kāi)webpack.config.js文件, 在里面新增一個(gè)配置節(jié)點(diǎn), 叫做module, 他是一個(gè)對(duì)象,
// 在這個(gè)module對(duì)象身上, 有個(gè)rules屬性, 這個(gè)rules屬性是個(gè)數(shù)組, 在這個(gè)數(shù)組中, 存放了
// 所有第三方文件的匹配和處理規(guī)則
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 如果要通過(guò)路徑導(dǎo)入node_modules中相關(guān)的文件, 可以省略node_modules也可以, 默認(rèn)查找
import 'bootstrap/dist/css/bootstrap.css' // bootstrap有字體不能識(shí)別需要裝插件
// class 關(guān)鍵字, 是ES6中提供的新語(yǔ)法, 是用來(lái)實(shí)現(xiàn)ES6中面向?qū)ο缶幊痰姆绞?
class Person{
// 使用static關(guān)鍵字 可以實(shí)現(xiàn)靜態(tài)屬性
static info = {name: 'zs', age: 20}
}
console.log(Person.info)
// 在webpack中默認(rèn)只能處理一部分ES6語(yǔ)法 需要借助第三方loader
// 通過(guò)Babel, 可以幫助我們將高級(jí)語(yǔ)法轉(zhuǎn)化為低級(jí)語(yǔ)法
// 1.需要安裝兩套包
// 第一套包 npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
// 第二套包 npm i babel-preset-env babel-preset-stage-0 -D
// 2. 打開(kāi)webpack.config.js, 在module節(jié)點(diǎn)下配置rules
// {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
// 3. 在項(xiàng)目的根目錄中新建一個(gè)叫.babelrc 的Babel 配置文件
// 寫(xiě)如下配置 presets翻譯為語(yǔ)法
// {
// "presets": ["env", "stage-0"],
// "plugins": ["transform-runtime"]
// }
webpack.png
webpack.config.js
const path = require('path');
// 導(dǎo)入在內(nèi)存中生成的HTML插件 只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
// 這個(gè)配置文件, 其實(shí)就是一個(gè)js文件, 通過(guò)node 中的模塊操作, 向外暴露了一個(gè)配置對(duì)象
module.exports = {
// 在配置文件中, 需要手動(dòng)的指定入口和出口
entry: path.join(__dirname, './src/main.js'), // 入口, 表示webpack要打包那個(gè)文件
output: {
path: path.join(__dirname, './dist'), // 指定打包好的文件, 放在那個(gè)目錄中去
filename: 'bundle.js', // 這里是指輸出的文件名稱(chēng)
},
mode: 'production',
plugins: [
new htmlWebpackPlugin({ //創(chuàng)建一個(gè)在內(nèi)存中生成html插件
template: path.join(__dirname, './src/index.html'), // 指定模板頁(yè)面, 將來(lái)會(huì)根據(jù)指定的頁(yè)面路徑, 去生成內(nèi)存中的頁(yè)面
filename: 'index.html' // 指定生成內(nèi)存中的頁(yè)面
})
],
module: { // 這個(gè)節(jié)點(diǎn)用于配置所有的第三方模塊的匹配規(guī)則
rules: [ // test是正則 use是用哪個(gè)第三方模塊來(lái)處理
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css文件的第三方規(guī)則
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置處理.less后綴的文件
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理.scss后綴文件
// limit限制圖片大小 處理圖片路徑的loader ?& 傳參 單位是byte 如果我們引用的圖片大于或者等于給定的LIMIT的值
// 則不會(huì)被轉(zhuǎn)為base64字符串, 否則相反 [name].[ext] 之前叫什么名現(xiàn)在還叫什么名字 [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 的高級(jí)語(yǔ)法轉(zhuǎn)化低級(jí)語(yǔ)法
]
},
performance: {
hints: "warning", // 枚舉
maxAssetSize: 30000000, // 整數(shù)類(lèi)型（以字節(jié)為單位）
maxEntrypointSize: 50000000, // 整數(shù)類(lèi)型（以字節(jié)為單位）
assetFilter: function(assetFilename) {
// 提供資源文件名的斷言函數(shù)
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
};
