end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

webpack5

master
陈裕财 4 years ago
parent
347f7779ea
commit
f16f60d00c
4 changed files with 66 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      build/webpack.base.conf.js
  2. 7
      build/webpack.prod.conf.js
  3. 4
      src/components/Image/UploadImage.vue
  4. 72
      src/components/Tinymce/index.vue

53
build/webpack.base.conf.js
View File

@ -54,8 +54,8 @@ var threadLoaderConfig={
// 可以修改名称来创建其余选项都一样的池(pool)
name: "my-pool"
}
}
const publicCssLoaders=process.env.NODE_ENV === 'production'?[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader']:[ 'style-loader','css-loader']
}
const publicCssLoaders=process.env.NODE_ENV === 'production'?[{loader:MiniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader','postcss-loader']:[ 'style-loader','css-loader','postcss-loader']
function resolve(dir) {
return path.join(__dirname, '..', dir)
@ -79,7 +79,7 @@ module.exports = {
},
output: {
clean:true,
path: config.build.assetsRoot,
path: config.build.assetsRoot,
filename: 'js/[name].[contenthash].js',
pathinfo: false,
publicPath: process.env.NODE_ENV === 'production'
@ -96,16 +96,15 @@ module.exports = {
// 加载器
module: {
// https://doc.webpack-china.org/guides/migrating/#module-loaders-module-rules
rules: [
rules: [
//...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
//include: resolve('src'),
use:[
threadLoaderConfig,
{
loader: 'vue-loader',
/**
/**
options:vueLoaderConfig,
*/
options: {
@ -115,30 +114,30 @@ module.exports = {
{ loader: 'cache-loader' },
{ loader: 'babel-loader', options: { presets: ['env'] } }
]
},
},
extractCSS: true,
hotReload:true,
},
hotReload:true,
},
}
]
},
},
{
test: /\.css$/,
use: publicCssLoaders,
},
},
{
test: /\.(sa|sc)ss$/,
use: publicCssLoaders.concat([
use: publicCssLoaders.concat([
// 将 Sass 编译成 CSS
'sass-loader',
]),
},
},
{
test: /\.less$/,
use: publicCssLoaders.concat([
use: publicCssLoaders.concat([
// 将 Sass 编译成 CSS
'less-loader',
]),
@ -149,7 +148,7 @@ module.exports = {
// 将 Sass 编译成 CSS
'stylus-loader',
]),
},
},
{ // 配置Babel将ES6+ 转换为ES5
test: /\.js$/,
use:[
@ -159,10 +158,10 @@ module.exports = {
options: {
presets: ['env'],
plugins: ['transform-runtime']
},
},
},
],
include: resolve('src'),
include: resolve('src'),
},
{
test: /\.svg$/,
@ -181,7 +180,7 @@ module.exports = {
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
type: 'asset/resource',
generator: {
filename: 'media/[hash][ext][query]'
@ -196,27 +195,23 @@ module.exports = {
}
]
},
},
plugins: [
new VueLoaderPlugin(),
],
optimization: {
splitChunks: {
chunks: 'all',
minSize: 200000,
enforceSizeThreshold: 400000,
chunks: 'all',
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
enforceSizeThreshold: 400000,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
enforceSizeThreshold: 400000,
reuseExistingChunk: true,
},
},
},

7
build/webpack.prod.conf.js
View File

@ -68,7 +68,6 @@ const webpackConfig = merge(baseWebpackConfig, {
}),
],
optimization: {
moduleIds:'hashed',
minimize: true,
minimizer:[
new CssMinimizerPlugin({
@ -83,11 +82,7 @@ const webpackConfig = merge(baseWebpackConfig, {
})
],
splitChunks: {
chunks: 'all',
minSize: {
javascript: 80000,
webassembly: 80000,
},
chunks: 'all'
},
},
})

4
src/components/Image/UploadImage.vue
View File

@ -250,7 +250,8 @@
pageSize: this.pageInfo.pageSize,
pageNum: this.pageInfo.pageNum,
total: this.pageInfo.total
};
};
if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
let orderBys=[];
for(var i=0;i<this.pageInfo.orderFields.length;i++){
@ -273,6 +274,7 @@
return;
}
params.branchId = this.branchId;
this.selectImages=[];
this.listLoading = true;
listImage(params).then((res) => {
var tips=res.data.tips;

72
src/components/Tinymce/index.vue
View File

@ -1,22 +1,25 @@
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
<textarea :id="tinymceId" class="tinymce-textarea" />
<textarea :id="tinymceId" class="tinymce-textarea" />
<el-dialog id="editor-dialog" class="image-dialog" title="选择图片" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" append-to-body>
<upload-image :multiple="true" :branch-id="userInfo.branchId" :dept-id="userInfo.deptid" :visible="dialogVisible" @cancel="dialogVisible=false" @confirm="handleConfirm"></upload-image>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import config from '@/common/config';//全局公共库import
import UploadImage from '@/components/Image/UploadImage';
import { mapGetters } from 'vuex'
import config from '@/common/config';//全局公共库import
import UploadImage from '@/components/Image/UploadImage';
import { mapGetters } from 'vuex'
import plugins from './plugins'
import toolbar from './toolbar'
import toolbar from './toolbar'
export default {
export default {
name: 'Tinymce',
components: { UploadImage },
props: {
props: {
value: {
type: String,
default: ''
@ -39,10 +42,10 @@ export default {
}
},
data() {
return {
return {
imageList:[],
dialogVisible:false,
editorHtmlData:this.value,
editorHtmlData:this.value,
tinymceId: 'vue-tinymce-'+new Date().getTime() + ((Math.random() * 1000).toFixed(0) + ''),
fullscreen: false,
languageTypeList: {
@ -54,19 +57,19 @@ export default {
computed: {
language() {
return this.languageTypeList[this.$store.getters.language]
},
},
...mapGetters([
'userInfo'
])
},
watch: {
value(val) {
value(val) {
if(val==this.editorHtmlData){
return;
}
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
},
editorHtmlData(val) {
editorHtmlData(val) {
this.$emit("input",val)
},
language() {
@ -75,12 +78,12 @@ export default {
}
},
mounted() {
this.$nextTick(() => this.initTinymce())
this.$nextTick(() => this.initTinymce())
},
/**
activated() {
this.initTinymce()
},
deactivated() {
this.destroyTinymce()
@ -111,32 +114,33 @@ export default {
imagetools_cors_hosts: ['www.qingqinkj.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
convert_urls:false,
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 20pt 24pt 28pt 30pt 36pt 38pt 40pt 42pt 46pt 48pt",
font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
init_instance_callback: editor => {
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
editor.on('NodeChange Change KeyUp SetContent', () => {
_this.editorHtmlData=editor.getContent()
}
editor.on('NodeChange Change KeyUp SetContent', () => {
_this.editorHtmlData=editor.getContent()
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
editor.addButton('imageList',{
text:'图片库',
icon:false,
onclick:function(){
_this.dialogVisible=true;
_this.$nextTick(()=>{
_this.dialogVisible=true;
_this.$nextTick(()=>{
//document.getElementById("editor-dialog").style.zIndex="100000"
})
})
}
})
}
@ -173,9 +177,9 @@ export default {
// console.log(err);
// });
// },
})
})
this.setContent(this.value)
},
destroyTinymce() {
const tinymce = window.tinymce.get(this.tinymceId)
@ -186,13 +190,13 @@ export default {
tinymce.destroy()
}
},
setContent(value) {
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
window.tinymce.get(this.tinymceId).getContent()
},
insertImage () {
insertImage () {
let imageList = this.imageList;
let imageHtml = "";
(imageList || []).map(item => {
@ -203,10 +207,10 @@ export default {
}
this.dialogVisible = false;
},
handleConfirm(imgs){
handleConfirm(imgs){
this.imageList=imgs//{url:xxx,remark:xxxx}
this.insertImage();
this.insertImage();
},
imageSuccessCBK(arr) {
const _this = this
@ -247,4 +251,4 @@ export default {
z-index:20000 !important;
}
</style>
</style>
Write Preview
Loading…
Cancel
Save