From 486b562e1d1f549799fc64b209ae326d45364780 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Sun, 30 May 2021 01:05:06 +0800 Subject: [PATCH] use mix 2 --- package.json | 17 ++-- resources/js/pages/project/detail.vue | 14 +++ resources/js/routes.js | 21 +++-- webpack.mix.js | 121 ++++++++++++++++++++++---- 4 files changed, 138 insertions(+), 35 deletions(-) create mode 100644 resources/js/pages/project/detail.vue diff --git a/package.json b/package.json index 8beb0480..a659ae1f 100644 --- a/package.json +++ b/package.json @@ -2,28 +2,25 @@ "private": true, "scripts": { "dev": "npm run development", - "development": "mix", - "watch": "mix watch", - "watch-poll": "mix watch -- --watch-options-poll=1000", - "hot": "mix watch --hot", + "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch": "npm run development -- --watch", + "watch-poll": "npm run watch -- --watch-poll", + "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", - "production": "mix --production" + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.21", "cross-env": "^7.0.2", "css-loader": "^0.28.7", + "internal-ip": "^6.2.0", "jquery": "^3.5.1", - "laravel-mix": "^6.0.6", + "laravel-mix": "^2.0", "lodash": "^4.17.19", "postcss": "^8.1.14", - "resolve-url-loader": "^3.1.3", - "sass": "^1.34.0", - "sass-loader": "^11.1.1", "stylus": "^0.54.8", "stylus-loader": "^3.0.2", "vue": "^2.6.12", - "vue-loader": "^15.9.7", "vue-router": "^3.4.2", "vue-template-compiler": "^2.6.11" }, diff --git a/resources/js/pages/project/detail.vue b/resources/js/pages/project/detail.vue new file mode 100644 index 00000000..7eafc06b --- /dev/null +++ b/resources/js/pages/project/detail.vue @@ -0,0 +1,14 @@ + + + diff --git a/resources/js/routes.js b/resources/js/routes.js index c95a5c23..8e106662 100755 --- a/resources/js/routes.js +++ b/resources/js/routes.js @@ -1,22 +1,27 @@ export default [ { - path: '/', name: 'index', + path: '/', component: resolve => require(['./pages/index.vue'], resolve) }, { - path: '*', - name: '404', - component: resolve => require(['./pages/404.vue'], resolve), - }, - { - path: '/login', name: 'login', + path: '/login', component: resolve => require(['./pages/login/index.vue'], resolve), }, { - path: '/dashboard', name: 'dashboard', + path: '/dashboard', component: resolve => require(['./pages/dashboard/index.vue'], resolve), }, + { + name: 'project-detail', + path: '/project/:id', + component: resolve => require(['./pages/project/detail.vue'], resolve), + }, + { + name: '404', + path: '*', + component: resolve => require(['./pages/404.vue'], resolve), + }, ] diff --git a/webpack.mix.js b/webpack.mix.js index 76b16a17..38c24585 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -1,4 +1,5 @@ const mix = require('laravel-mix'); +const ipv4 = require('internal-ip').v4.sync(); /* |-------------------------------------------------------------------------- @@ -6,26 +7,112 @@ const mix = require('laravel-mix'); |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps - | for your Laravel applications. By default, we are compiling the CSS + | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ -function getFileName(str) { - if (/resources_js_pages_(.*?)_vue/.test(str)) { - return /resources_js_pages_(.*?)_vue/.exec(str)[1]; - } - return str; -} -mix.vue({ version: 2 }) - .copy('resources/public', 'public') - .js('resources/js/app.js', 'public/js') - .sass('resources/scss/app.scss','public/css') - .webpackConfig({ - output: { - chunkFilename: function ({chunk}) { - return `js/build/${ getFileName(chunk.id) }.${ mix.inProduction() ? '[hash:8].' : '' }js` +//复制资源 +mix.copy('resources/public', 'public'); + +//生成vue页面js +mix.js('resources/js/app.js', 'public/js'); + +//生成css样式文件 +mix.sass('resources/scss/app.scss', 'public/css'); + +//配置webpack +mix.webpackConfig({ + output: { + // 路由懒加载文件路径 + chunkFilename: 'js/build/[name].js?[hash:8]', + }, + devServer: { + disableHostCheck: true, + }, + module: { + rules: [{ + // 图片资源保存路径规则 + test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/, + loaders: [ + { + loader: 'file-loader', + options: { + name: path => { + path = path.replace(/\\/g, '/'); + // 自定义部分 + try { + if (/\/resources\//.test(path)) { + let file = path.substring(path.indexOf('/resources/') + '/resources/'.length); + if (file) { + if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3); + if (file.substring(0, 7) === 'images/') file = file.substring(7); + return 'images/' + file + '?[hash:8]' + } + } + } catch (e) { } + // 系统定义部分 + if (!/node_modules|bower_components/.test(path)) { + return ( + Config.fileLoaderDirs.images + '/[name].[ext]?[hash:8]' + ); + } + return ( + Config.fileLoaderDirs.images + '/vendor/' + path.replace( + /((.*(node_modules|bower_components))|images|image|img|assets)\//g, + '' + ) + '?[hash:8]' + ); + }, + publicPath: Config.resourceRoot + } + }, { + loader: 'img-loader', + options: Config.imgLoaderOptions + } + ] + }, { + // 字体资源保存路径规则 + test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/, + loader: 'file-loader', + options: { + name: path => { + path = path.replace(/\\/g, '/'); + // 自定义部分 + try { + if (/\/resources\//.test(path)) { + let file = path.substring(path.indexOf('/resources/') + '/resources/'.length); + if (file) { + if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3); + if (file.substring(0, 7) === 'fonts/') file = file.substring(7); + return 'fonts/' + file + '?[hash:8]' + } + } + } catch (e) { } + // 系统定义部分 + if (!/node_modules|bower_components/.test(path)) { + return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash:8]'; + } + return ( + Config.fileLoaderDirs.fonts + '/vendor/' + path.replace( + /((.*(node_modules|bower_components))|fonts|font|assets)\//g, + '' + ) + '?[hash:8]' + ); + }, + publicPath: Config.resourceRoot } - }, - }); + }] + } +}).options({ + uglify: { + uglifyOptions: { + compress: { inline: false } + } + }, + hmrOptions: { + host: ipv4 || 'localhost', + port: '9990' + }, +});