webpack 种的 IgnorePlugin 在打包时忽略本地化内容，如引入了一个插件，只用到了中文语言包，打包的时候把非中文语言包排除掉
- 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'
// 设置中文
moment.locale('zh-cn');
let momentStr = moment().subtract(10, 'days').calendar();
console.log('现在时间：', momentStr);
案例：
webpack.config.js完整配置
// webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);
// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
// 抽离css为单独文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 导入样式压缩
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
let UglifyjsPlugin = require('uglifyjs-webpack-plugin');
// 导入webpack
let webpack = require('webpack');
// webpack相关配置
module.exports = {
// 压缩 model 必须是production才有效果
optimization: {
minimizer: [
new UglifyjsPlugin({
// 使用缓存
cache: true
}),
new OptimizeCssPlugin()
]
},
// 开发服务的配置
devServer: {
// 端口，默认8080
port: '8099',
// 进度条
progress: true,
// 启动后访问目录，默认是项目根目录，这个设置到打包后目录
contentBase: './build',
// 启动压缩
//compress: true
},
// 模式，2种：生产模式(production)和开发模式(development)
// 开发模式不压缩打包后代码，生产模式压缩打包后代码
mode: 'development',
// 入口,表示从哪里开始打包
entry: './src/index.js',
// 表示出口(输出后文件相关配置)
output: {
// 打包后的文件名,产生哈希
//filename: 'bundle.[hash].js',
// 哈希8位
filename: 'bundle.[hash:8].js',
// 输出后的路径(必须是一个绝对路径)
path: path.resolve(__dirname, 'dist'),
// 如果静态文件放在了cdn css、图片路径自动添加前缀
// publicPath: 'http://itssh.cn/'
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html',
// 生产开启，压缩代码
// minify: {
// // 删除html双引号
// removeAttributeQuotes: true,
// // 压缩成一行
// collapseWhitespace: true
// },
// 文件哈希
//hash: true
}),
// 抽离css为单独文件
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产生文件
limit: 1000,
// 产出路径
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需要数组，单个可写成字符串
// loader顺序：从右向左执行,从下到上，单个loader可添加更多配置，使用对象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 样式插入到顶部
// insertAt: 'top'
// }
// }, 'css-loader']
// css-load处理完 再 抽离，从后往前执行loader
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ]
},
{
test: /\.less$/, //匹配less文件
// css-loader 处理css文件@import嵌套
// style-loader 把css插入header
// 多个loader需要数组，单个可写成字符串
// loader顺序：从右向左执行,从下到上，单个loader可添加更多配置，使用对象形式
// use: [{loader: 'style-loader', options: ...}, 'css-loader']
// use: [{
// loader: 'style-loader',
// options: {
// // 样式插入到顶部
// insertAt: 'top'
// }
// }, 'css-loader', 'less-loader']
// 从后向前执行
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' , 'less-loader']
}
]
}
}
