webpack 種的 IgnorePlugin 在打包時忽略本地化內(nèi)容，如引入了一個插件，只用到了中文語言包，打包的時候把非中文語言包排除掉
- 1、安裝moment插件（時間處理庫）
yarn add moment
- 2、webpack.config.js 的plugins處添加配置
let webpack = require('webpack');
plugins: [
// 忽略解析三方包里插件
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
]
- 3、index.js代碼片段
//
import moment from 'moment'
// 引入中文
import 'moment/locale/zh-cn'
// 設(shè)置中文
moment.locale('zh-cn');
let momentStr = moment().subtract(10, 'days').calendar();
console.log('現(xiàn)在時間：', momentStr);
案例：
webpack.config.js完整配置
// webpack是node寫出來的， 需要node的寫法
let path = require('path');
// path.resolve 相對路徑轉(zhuǎn)成絕對路徑
// console.log(path.resolve('dist'));
// 以當(dāng)前目錄
// console.log(__dirname);
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
// 抽離css為單獨(dú)文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 導(dǎo)入樣式壓縮
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// 壓縮js
let UglifyjsPlugin = require('uglifyjs-webpack-plugin');
// 導(dǎo)入webpack
let webpack = require('webpack');
// webpack相關(guān)配置
module.exports = {
// 壓縮 model 必須是production才有效果
optimization: {
minimizer: [
new UglifyjsPlugin({
// 使用緩存
cache: true
}),
new OptimizeCssPlugin()
]
},
// 開發(fā)服務(wù)的配置
devServer: {
// 端口，默認(rèn)8080
port: '8099',
// 進(jìn)度條
progress: true,
// 啟動后訪問目錄，默認(rèn)是項(xiàng)目根目錄，這個設(shè)置到打包后目錄
contentBase: './build',
// 啟動壓縮
//compress: true
},
// 模式，2種：生產(chǎn)模式(production)和開發(fā)模式(development)
// 開發(fā)模式不壓縮打包后代碼，生產(chǎn)模式壓縮打包后代碼
mode: 'development',
// 入口,表示從哪里開始打包
entry: './src/index.js',
// 表示出口(輸出后文件相關(guān)配置)
output: {
// 打包后的文件名,產(chǎn)生哈希
//filename: 'bundle.[hash].js',
// 哈希8位
filename: 'bundle.[hash:8].js',
// 輸出后的路徑(必須是一個絕對路徑)
path: path.resolve(__dirname, 'dist'),
// 如果靜態(tài)文件放在了cdn css、圖片路徑自動添加前綴
// publicPath: 'http://itssh.cn/'
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html',
// 生產(chǎn)開啟，壓縮代碼
// minify: {
// // 刪除html雙引號
// removeAttributeQuotes: true,
// // 壓縮成一行
// collapseWhitespace: true
// },
// 文件哈希
//hash: true
}),
// 抽離css為單獨(dú)文件
new MiniCssExtractPlugin({
filename: 'css/main.css'
}),
// 壓縮css
//new OptimizeCssPlugin()
// 壓縮js
// new UglifyjsPlugin({
// // 使用緩存
// cache: true
// })
new webpack.ProvidePlugin({
$: 'jquery'
}),
// 忽略解析三方包里插件
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
],
// 模塊處理
module: {
noParse: '/jquery|lodash/',
// loader
rules: [
// {
// test: /\.js$/, //匹配js文件
// use: {
// loader: 'eslint-loader',
// options: {
// enforce: 'pre' // previous post
// }
// }
// },
// expose-loader提供全局
// {
// test: require.resolve('jquery'),
// use: 'expose-loader?$'
// },
{
test: /\.html$/,
use: 'html-withimg-loader'
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 打包少于1000kb用base64，否則使用file-loader產(chǎn)生文件
limit: 1000,
// 產(chǎn)出路徑
outputPath: 'img/',
// 只給圖片添加前綴，如果使用publicPath,outputPath無效
// publicPath: 'http://itssh.cn/'
}
}
},
// {
// test: /\.(png|jpg|gif)$/,
// use: 'file-loader',
// },
{
test: /\.js$/, //匹配js文件
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
"@babel/plugin-transform-runtime"
]
}
}
},
{
test: /\.css$/, //匹配css文件
// css-loader 處理css文件@import嵌套
// style-loader 把css插入header
// 多個loader需要數(shù)組，單個可寫成字符串
// loader順序：從右向左執(zhí)行,從下到上，單個loader可添加更多配置，使用對象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 樣式插入到頂部
// insertAt: 'top'
// }
// }, 'css-loader']
// css-load處理完 再 抽離，從后往前執(zhí)行l(wèi)oader
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
},
{
test: /\.less$/, //匹配less文件
// css-loader 處理css文件@import嵌套
// style-loader 把css插入header
// 多個loader需要數(shù)組，單個可寫成字符串
// loader順序：從右向左執(zhí)行,從下到上，單個loader可添加更多配置，使用對象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 樣式插入到頂部
// insertAt: 'top'
// }
// }, 'css-loader', 'less-loader']
// 從后向前執(zhí)行
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
}
]
}
}
