安裝
1.cnpm i webpack webpack-cli
2.模塊局部安裝會(huì)在node_modules/.bin/webpack目錄創(chuàng)建軟鏈接
基礎(chǔ)
entry
依賴入口
// 單入口，SPA
entry: 'xx/xx.js'
// 多入口，MPA
entry: {
? ? app: './src/app.js',
? ? adminApp: './src/adminApp.js'
}
output
指定打包后的輸出
output: {
? ? filename: '[name].js',
? ? path: path.resolve(__dirname,'dist') // 單入口可以寫死文件名，多入口一定要使用占位符[name]，來自動(dòng)生成多個(gè)文件
}
Mode
有開發(fā)(development)和生產(chǎn)(production)模式
Plugins
Loaders
webpack開箱即用只支持JS和JSON兩種文件類型，通過Loader去支持其他文件類型并把他們轉(zhuǎn)化為有效的模塊，并且可以添加到依賴圖中。
本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)化的結(jié)果。
例如： babel/ts-loader、css/less/scss-loader、url/file-loader、raw-loader(將.txt文件以字符串的形式導(dǎo)入)、thread-loader(多進(jìn)程打包js和css)
module: {
? ? rules: [
? ? ? ? { test: /.txt$/,use: 'raw-loader' },
? ? ? ? { test: /.css$/,use: [
? ? ? ? ? ? loader: 'css-loader',
? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? modules: {
? ? ? ? ? ? ? ? ? ? localIdentName: '[path][name]__[hash:base64:5]'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]}
? ? ]
}
解析ES6
1.使用babel-loader、babel的配置文件.babelrc
2.安裝babel-loader、@babel/core@babel/preset-env
// webpack.config.js
module: {
? ? rules: [
? ? ? ? { test: /.js?x$/, use: 'babel-loader', exclude: /node_modules/ }
? ? ]
}
// .babelrc
{
? ? "presets": [
? ? ? ? "@babel/preset-env",
? ? ? ? "@babel/preset-react"
? ? ],
? ? "plugins": [
? ? ? ? // 各種插件
? ? ? ? "@babel/propsoal-class-properties"
? ? ]
}
css/less/scss-loader
1.css-loader用于加載.css文件，并且轉(zhuǎn)換成common對(duì)象
2.style-loader將樣式通過style標(biāo)簽，插入到head中
// use: [ loader1,loader2,loader3 ] , loader的處理順序是3>2>1 , 從后往前
module: {
? ? rules: [
? ? ? ? {
? ? ? ? ? ? test: /.s?css$/,
? ? ? ? ? ? use: [
? ? ? ? ? ? ? ? isDev ? 'style-loader' : MiniCssExtractPlugin.loader
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? loader: 'css-loader',
? ? ? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? ? ? importLoaders: 1,
? ? ? ? ? ? ? ? ? ? ? ? // css模塊化使用
? ? ? ? ? ? ? ? ? ? ? ? modules: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? localIdentName: '[path][name]__[local]--[hash:base64:5]'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? 'postcss-loader'
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
}
url/file-loader
1.用于處理文件、圖片、字體、多媒體
2.url-loader實(shí)現(xiàn)較小的圖片轉(zhuǎn)成base64，插入到代碼中，當(dāng)超過限制的limit后，會(huì)自動(dòng)降級(jí)到file-loader
{
? ? test: /\. (png|jpg|jpeg|gif|eot|woff|woff2|ttf|svg|otf) $/,
? ? use: [
? ? ? ? loader: 'url-loader',
? ? ? ? options: {
? ? ? ? ? ? limit: 10 * 1024, // 10k? ? ?
? ? ? ? ? ? ? name: isDev ? 'images/[name].[ext]' : 'images/[name].[hash.[ext]',? ? ?
? ? ? ? ? ? ? publicPath: idDev ? '/' : 'cdn地址',
? ? ? ? },
? ? ? ? // production , 用于圖片壓縮
? ? ? ? {
? ? ? ? ? ? loader: 'image-webpack-loader',
? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? bypassOnDebug: true
? ? ? ? ? ? }
? ? ? ? }
? ? ]
}
