diff --git a/build/dev-server.js b/build/dev-server.js index eed5b4b..39ad2b4 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -1,28 +1,28 @@ -require('./check-versions')() +require("./check-versions")(); -var config = require('../config') +var config = require("../config"); if (!process.env.NODE_ENV) { - process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) + process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV); } // var opn = require('opn') -var path = require('path') -var express = require('express') -var webpack = require('webpack') -var proxyMiddleware = require('http-proxy-middleware') -var portfinder = require('portfinder') -var webpackConfig = require('./webpack.dev.conf') +var path = require("path"); +var express = require("express"); +var webpack = require("webpack"); +var proxyMiddleware = require("http-proxy-middleware"); +var portfinder = require("portfinder"); +var webpackConfig = require("./webpack.dev.conf"); // default port where dev server listens for incoming traffic -var port = process.env.PORT || config.dev.port +var port = process.env.PORT || config.dev.port; // automatically open browser, if not set will be false -var autoOpenBrowser = !!config.dev.autoOpenBrowser +var autoOpenBrowser = !!config.dev.autoOpenBrowser; // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware -var proxyTable = config.dev.proxyTable +var proxyTable = config.dev.proxyTable; -var app = express() -var compiler = webpack(webpackConfig) +var app = express(); +var compiler = webpack(webpackConfig); // var devMiddleware = require('webpack-dev-middleware')(compiler, { // publicPath: webpackConfig.output.publicPath, @@ -42,16 +42,16 @@ var compiler = webpack(webpackConfig) // }) // proxy api requests -Object.keys(proxyTable).forEach(function (context) { - var options = proxyTable[context] - if (typeof options === 'string') { - options = { target: options } +Object.keys(proxyTable).forEach(function(context) { + var options = proxyTable[context]; + if (typeof options === "string") { + options = { target: options }; } - app.use(proxyMiddleware(options.filter || context, options)) -}) + app.use(proxyMiddleware(options.filter || context, options)); +}); // handle fallback for HTML5 history API -app.use(require('connect-history-api-fallback')()) +app.use(require("connect-history-api-fallback")()); // serve webpack bundle output // app.use(devMiddleware) @@ -61,15 +61,18 @@ app.use(require('connect-history-api-fallback')()) // app.use(hotMiddleware) // serve pure static assets -var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) -app.use(staticPath, express.static('./static')) +var staticPath = path.posix.join( + config.dev.assetsPublicPath, + config.dev.assetsSubDirectory +); +app.use(staticPath, express.static("./static")); // var uri = 'http://localhost:' + port -var _resolve +var _resolve; var readyPromise = new Promise(resolve => { - _resolve = resolve -}) + _resolve = resolve; +}); // console.log('> Starting dev server...') // devMiddleware.waitUntilValid(() => { @@ -82,25 +85,27 @@ var readyPromise = new Promise(resolve => { // }) module.exports = new Promise((resolve, reject) => { - portfinder.basePort = port - portfinder.getPortPromise() - .then(newPort => { + portfinder.basePort = port; + portfinder + .getPortPromise() + .then(newPort => { if (port !== newPort) { - console.log(`${port}端口被占用,开启新端口${newPort}`) + console.log(`${port}端口被占用,开启新端口${newPort}`); } - var server = app.listen(newPort, 'localhost') + var server = app.listen(newPort, "localhost"); // for 小程序的文件保存机制 - require('webpack-dev-middleware-hard-disk')(compiler, { + require("webpack-dev-middleware-hard-disk")(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true - }) + }); resolve({ ready: readyPromise, close: () => { - server.close() + server.close(); } - }) - }).catch(error => { - console.log('没有找到空闲端口,请打开任务管理器杀死进程端口再试', error) - }) -}) + }); + }) + .catch(error => { + console.log("没有找到空闲端口,请打开任务管理器杀死进程端口再试", error); + }); +}); diff --git a/build/utils.js b/build/utils.js index fd81fd2..c0a98b4 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,50 +1,51 @@ -var path = require('path') -var config = require('../config') -var ExtractTextPlugin = require('extract-text-webpack-plugin') +var path = require("path"); +var config = require("../config"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); -exports.assetsPath = function (_path) { - var assetsSubDirectory = process.env.NODE_ENV === 'production' - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory - return path.posix.join(assetsSubDirectory, _path) -} +exports.assetsPath = function(_path) { + var assetsSubDirectory = + process.env.NODE_ENV === "production" + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory; + return path.posix.join(assetsSubDirectory, _path); +}; -exports.cssLoaders = function (options) { - options = options || {} +exports.cssLoaders = function(options) { + options = options || {}; var cssLoader = { - loader: 'css-loader', + loader: "css-loader", options: { - minimize: process.env.NODE_ENV === 'production', + minimize: process.env.NODE_ENV === "production", sourceMap: options.sourceMap } - } + }; var postcssLoader = { - loader: 'postcss-loader', + loader: "postcss-loader", options: { sourceMap: true } - } + }; var px2rpxLoader = { - loader: 'px2rpx-loader', + loader: "px2rpx-loader", options: { baseDpr: 1, rpxUnit: 0.5 } - } + }; // generate loader string to be used with extract text plugin - function generateLoaders (loader, loaderOptions) { - var loaders = [cssLoader, px2rpxLoader, postcssLoader] + function generateLoaders(loader, loaderOptions) { + var loaders = [cssLoader, px2rpxLoader, postcssLoader]; if (loader) { loaders.push({ - loader: loader + '-loader', + loader: loader + "-loader", options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) - }) + }); } // Extract CSS when that option is specified @@ -52,10 +53,10 @@ exports.cssLoaders = function (options) { if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, - fallback: 'vue-style-loader' - }) + fallback: "vue-style-loader" + }); } else { - return ['vue-style-loader'].concat(loaders) + return ["vue-style-loader"].concat(loaders); } } @@ -64,24 +65,24 @@ exports.cssLoaders = function (options) { css: generateLoaders(), wxss: generateLoaders(), postcss: generateLoaders(), - less: generateLoaders('less'), - sass: generateLoaders('sass', { indentedSyntax: true }), - scss: generateLoaders('sass'), - stylus: generateLoaders('stylus'), - styl: generateLoaders('stylus') - } -} + less: generateLoaders("less"), + sass: generateLoaders("sass", { indentedSyntax: true }), + scss: generateLoaders("sass"), + stylus: generateLoaders("stylus"), + styl: generateLoaders("stylus") + }; +}; // Generate loaders for standalone style files (outside of .vue) -exports.styleLoaders = function (options) { - var output = [] - var loaders = exports.cssLoaders(options) +exports.styleLoaders = function(options) { + var output = []; + var loaders = exports.cssLoaders(options); for (var extension in loaders) { - var loader = loaders[extension] + var loader = loaders[extension]; output.push({ - test: new RegExp('\\.' + extension + '$'), + test: new RegExp("\\." + extension + "$"), use: loader - }) + }); } - return output -} + return output; +}; diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js index 4817a80..56c6a1f 100644 --- a/build/vue-loader.conf.js +++ b/build/vue-loader.conf.js @@ -1,8 +1,8 @@ -var utils = require('./utils') -var config = require('../config') +var utils = require("./utils"); +var config = require("../config"); // var isProduction = process.env.NODE_ENV === 'production' // for mp -var isProduction = true +var isProduction = true; module.exports = { loaders: utils.cssLoaders({ @@ -12,9 +12,9 @@ module.exports = { extract: isProduction }), transformToRequire: { - video: 'src', - source: 'src', - img: 'src', - image: 'xlink:href' + video: "src", + source: "src", + img: "src", + image: "xlink:href" } -} +}; diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 074b3b1..f73c763 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -1,123 +1,128 @@ -var path = require('path') -var fs = require('fs') -var utils = require('./utils') -var config = require('../config') -var vueLoaderConfig = require('./vue-loader.conf') -var MpvuePlugin = require('webpack-mpvue-asset-plugin') -var glob = require('glob') -var CopyWebpackPlugin = require('copy-webpack-plugin') -var relative = require('relative') +var path = require("path"); +var fs = require("fs"); +var utils = require("./utils"); +var config = require("../config"); +var vueLoaderConfig = require("./vue-loader.conf"); +var MpvuePlugin = require("webpack-mpvue-asset-plugin"); +var glob = require("glob"); +var CopyWebpackPlugin = require("copy-webpack-plugin"); +var relative = require("relative"); -function resolve (dir) { - return path.join(__dirname, '..', dir) +function resolve(dir) { + return path.join(__dirname, "..", dir); } -function getEntry (rootSrc) { +function getEntry(rootSrc) { var map = {}; - glob.sync(rootSrc + '/pages/**/main.js') - .forEach(file => { - var key = relative(rootSrc, file).replace('.js', ''); + glob.sync(rootSrc + "/pages/**/main.js").forEach(file => { + var key = relative(rootSrc, file).replace(".js", ""); map[key] = file; - }) - return map; + }); + return map; } -const appEntry = { app: resolve('./src/main.js') } -const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js') -const entry = Object.assign({}, appEntry, pagesEntry) +const appEntry = { app: resolve("./src/main.js") }; +const pagesEntry = getEntry(resolve("./src"), "pages/**/main.js"); +const entry = Object.assign({}, appEntry, pagesEntry); module.exports = { // 如果要自定义生成的 dist 目录里面的文件路径, // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式, // toPath 为相对于 dist 的路径, 例:index/demo,则生成的文件地址为 dist/index/demo.js entry, - target: require('mpvue-webpack-target'), + target: require("mpvue-webpack-target"), output: { path: config.build.assetsRoot, - filename: '[name].js', - publicPath: process.env.NODE_ENV === 'production' - ? config.build.assetsPublicPath - : config.dev.assetsPublicPath + filename: "[name].js", + publicPath: + process.env.NODE_ENV === "production" + ? config.build.assetsPublicPath + : config.dev.assetsPublicPath }, resolve: { - extensions: ['.js', '.vue', '.json'], + extensions: [".js", ".vue", ".json"], alias: { - 'vue': 'mpvue', - '@': resolve('src') + vue: "mpvue", + "@": resolve("src") }, symlinks: false, - aliasFields: ['mpvue', 'weapp', 'browser'], - mainFields: ['browser', 'module', 'main'] + aliasFields: ["mpvue", "weapp", "browser"], + mainFields: ["browser", "module", "main"] }, module: { rules: [ { test: /\.(js|vue)$/, - loader: 'eslint-loader', - enforce: 'pre', - include: [resolve('src'), resolve('test')], + loader: "eslint-loader", + enforce: "pre", + include: [resolve("src"), resolve("test")], options: { - formatter: require('eslint-friendly-formatter') + formatter: require("eslint-friendly-formatter") } }, { test: /\.vue$/, - loader: 'mpvue-loader', + loader: "mpvue-loader", options: vueLoaderConfig }, { test: /\.js$/, - include: [resolve('src'), resolve('test')], + include: [resolve("src"), resolve("test")], use: [ - 'babel-loader', + "babel-loader", { - loader: 'mpvue-loader', + loader: "mpvue-loader", options: { checkMPEntry: true } - }, + } ] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url-loader', + loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath('img/[name].[ext]') + name: utils.assetsPath("img/[name].[ext]") } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, - loader: 'url-loader', + loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath('media/[name].[ext]') + name: utils.assetsPath("media/[name].[ext]") } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url-loader', + loader: "url-loader", options: { limit: 10000, - name: utils.assetsPath('fonts/[name].[ext]') + name: utils.assetsPath("fonts/[name].[ext]") } } ] }, plugins: [ new MpvuePlugin(), - new CopyWebpackPlugin([{ - from: '**/*.json', - to: '' - }], { - context: 'src/' - }), + new CopyWebpackPlugin( + [ + { + from: "**/*.json", + to: "" + } + ], + { + context: "src/" + } + ), new CopyWebpackPlugin([ { - from: path.resolve(__dirname, '../static'), - to: path.resolve(__dirname, '../dist/static'), - ignore: ['.*'] + from: path.resolve(__dirname, "../static"), + to: path.resolve(__dirname, "../dist/static"), + ignore: [".*"] } ]) ] -} +}; diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index af13377..e9bfb96 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -1,16 +1,16 @@ -var utils = require('./utils') -var webpack = require('webpack') -var config = require('../config') -var merge = require('webpack-merge') -var baseWebpackConfig = require('./webpack.base.conf') +var utils = require("./utils"); +var webpack = require("webpack"); +var config = require("../config"); +var merge = require("webpack-merge"); +var baseWebpackConfig = require("./webpack.base.conf"); // var HtmlWebpackPlugin = require('html-webpack-plugin') -var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') +var FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin"); // copy from ./webpack.prod.conf.js -var path = require('path') -var ExtractTextPlugin = require('extract-text-webpack-plugin') -var CopyWebpackPlugin = require('copy-webpack-plugin') -var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') +var path = require("path"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var CopyWebpackPlugin = require("copy-webpack-plugin"); +var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); // add hot-reload related code to entry chunks // Object.keys(baseWebpackConfig.entry).forEach(function (name) { @@ -26,24 +26,24 @@ module.exports = merge(baseWebpackConfig, { }, // cheap-module-eval-source-map is faster for development // devtool: '#cheap-module-eval-source-map', - devtool: '#source-map', + devtool: "#source-map", output: { path: config.build.assetsRoot, // filename: utils.assetsPath('[name].[chunkhash].js'), // chunkFilename: utils.assetsPath('[id].[chunkhash].js') - filename: utils.assetsPath('[name].js'), - chunkFilename: utils.assetsPath('[id].js') + filename: utils.assetsPath("[name].js"), + chunkFilename: utils.assetsPath("[id].js") }, plugins: [ new webpack.DefinePlugin({ - 'process.env': config.dev.env + "process.env": config.dev.env }), // copy from ./webpack.prod.conf.js // extract css into its own file new ExtractTextPlugin({ // filename: utils.assetsPath('[name].[contenthash].css') - filename: utils.assetsPath('[name].wxss') + filename: utils.assetsPath("[name].wxss") }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. @@ -53,19 +53,20 @@ module.exports = merge(baseWebpackConfig, { } }), new webpack.optimize.CommonsChunkPlugin({ - name: 'common/vendor', - minChunks: function (module, count) { + name: "common/vendor", + minChunks: function(module, count) { // any required modules inside node_modules are extracted to vendor return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf('node_modules') >= 0 - ) || count > 1 + (module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf("node_modules") >= 0) || + count > 1 + ); } }), new webpack.optimize.CommonsChunkPlugin({ - name: 'common/manifest', - chunks: ['common/vendor'] + name: "common/manifest", + chunks: ["common/vendor"] }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage @@ -79,4 +80,4 @@ module.exports = merge(baseWebpackConfig, { // }), new FriendlyErrorsPlugin() ] -}) +}); diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index d4e2971..11dfa66 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -1,16 +1,16 @@ -var path = require('path') -var utils = require('./utils') -var webpack = require('webpack') -var config = require('../config') -var merge = require('webpack-merge') -var baseWebpackConfig = require('./webpack.base.conf') -var UglifyJsPlugin = require('uglifyjs-webpack-plugin') -var CopyWebpackPlugin = require('copy-webpack-plugin') +var path = require("path"); +var utils = require("./utils"); +var webpack = require("webpack"); +var config = require("../config"); +var merge = require("webpack-merge"); +var baseWebpackConfig = require("./webpack.base.conf"); +var UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +var CopyWebpackPlugin = require("copy-webpack-plugin"); // var HtmlWebpackPlugin = require('html-webpack-plugin') -var ExtractTextPlugin = require('extract-text-webpack-plugin') -var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin"); -var env = config.build.env +var env = config.build.env; var webpackConfig = merge(baseWebpackConfig, { module: { @@ -19,18 +19,18 @@ var webpackConfig = merge(baseWebpackConfig, { extract: true }) }, - devtool: config.build.productionSourceMap ? '#source-map' : false, + devtool: config.build.productionSourceMap ? "#source-map" : false, output: { path: config.build.assetsRoot, // filename: utils.assetsPath('[name].[chunkhash].js'), // chunkFilename: utils.assetsPath('[id].[chunkhash].js') - filename: utils.assetsPath('[name].js'), - chunkFilename: utils.assetsPath('[id].js') + filename: utils.assetsPath("[name].js"), + chunkFilename: utils.assetsPath("[id].js") }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ - 'process.env': env + "process.env": env }), new UglifyJsPlugin({ sourceMap: true @@ -38,7 +38,7 @@ var webpackConfig = merge(baseWebpackConfig, { // extract css into its own file new ExtractTextPlugin({ // filename: utils.assetsPath('[name].[contenthash].css') - filename: utils.assetsPath('[name].wxss') + filename: utils.assetsPath("[name].wxss") }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. @@ -68,24 +68,25 @@ var webpackConfig = merge(baseWebpackConfig, { new webpack.HashedModuleIdsPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ - name: 'common/vendor', - minChunks: function (module, count) { + name: "common/vendor", + minChunks: function(module, count) { // any required modules inside node_modules are extracted to vendor return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf('node_modules') >= 0 - ) || count > 1 + (module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf("node_modules") >= 0) || + count > 1 + ); } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ - name: 'common/manifest', - chunks: ['common/vendor'] + name: "common/manifest", + chunks: ["common/vendor"] }) ] -}) +}); // if (config.build.productionGzip) { // var CompressionWebpackPlugin = require('compression-webpack-plugin') @@ -106,8 +107,9 @@ var webpackConfig = merge(baseWebpackConfig, { // } if (config.build.bundleAnalyzerReport) { - var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin - webpackConfig.plugins.push(new BundleAnalyzerPlugin()) + var BundleAnalyzerPlugin = require("webpack-bundle-analyzer") + .BundleAnalyzerPlugin; + webpackConfig.plugins.push(new BundleAnalyzerPlugin()); } -module.exports = webpackConfig +module.exports = webpackConfig; diff --git a/config/dev.env.js b/config/dev.env.js index 934221d..609ccc2 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -1,6 +1,6 @@ -var merge = require('webpack-merge') -var prodEnv = require('./prod.env') +var merge = require("webpack-merge"); +var prodEnv = require("./prod.env"); module.exports = merge(prodEnv, { - NODE_ENV: 'development' -}) + NODE_ENV: '"development"' +}); diff --git a/config/index.js b/config/index.js index 5678f57..75f3fbb 100644 --- a/config/index.js +++ b/config/index.js @@ -1,20 +1,20 @@ // see http://vuejs-templates.github.io/webpack for documentation. -var path = require('path') +var path = require("path"); module.exports = { build: { - env: require('./prod.env'), - index: path.resolve(__dirname, '../dist/index.html'), - assetsRoot: path.resolve(__dirname, '../dist'), - assetsSubDirectory: '', - assetsPublicPath: '/', + env: require("./prod.env"), + index: path.resolve(__dirname, "../dist/index.html"), + assetsRoot: path.resolve(__dirname, "../dist"), + assetsSubDirectory: "", + assetsPublicPath: "/", productionSourceMap: false, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, - productionGzipExtensions: ['js', 'css'], + productionGzipExtensions: ["js", "css"], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` @@ -22,12 +22,12 @@ module.exports = { bundleAnalyzerReport: process.env.npm_config_report }, dev: { - env: require('./dev.env'), + env: require("./dev.env"), port: 8080, // 在小程序开发者工具中不需要自动打开浏览器 autoOpenBrowser: false, - assetsSubDirectory: '', - assetsPublicPath: '/', + assetsSubDirectory: "", + assetsPublicPath: "/", proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README @@ -36,4 +36,4 @@ module.exports = { // just be aware of this issue when enabling this option. cssSourceMap: false } -} +}; diff --git a/config/prod.env.js b/config/prod.env.js index 5fc42d2..f051dac 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,3 +1,3 @@ module.exports = { - NODE_ENV: 'production' -} + NODE_ENV: '"production"' +};