From a56e371bb0d6424304b6f54bb11c33b018ab6dc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Fri, 17 May 2019 15:51:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9webpack=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/yilia/package.json | 2 +- themes/yilia/source-src/template/css.html | 2 +- themes/yilia/source-src/template/script.html | 7 +- themes/yilia/webpack.config.js | 187 ++++++++++--------- 4 files changed, 101 insertions(+), 97 deletions(-) diff --git a/themes/yilia/package.json b/themes/yilia/package.json index 4211719..b03db4e 100644 --- a/themes/yilia/package.json +++ b/themes/yilia/package.json @@ -3,7 +3,7 @@ "version": "5.1.0", "description": "Hexo响应式主题", "scripts": { - "dev": "webpack --watch --progress --mode development", + "dev": "webpack --progress --mode development", "build": "webpack -p --mode production" }, "repository": { diff --git a/themes/yilia/source-src/template/css.html b/themes/yilia/source-src/template/css.html index e1ae6bb..da89c4b 100644 --- a/themes/yilia/source-src/template/css.html +++ b/themes/yilia/source-src/template/css.html @@ -4,5 +4,5 @@ <% for (let index in htmlWebpackPlugin.files.css) { %> <% let cssFile = htmlWebpackPlugin.files.css[index] %> -<%= `${left} css('${cssFile.substr(cssFile.indexOf("css"),cssFile.length)}') ${right}${right2}` %> +<%= `${left} css('${cssFile}') ${right}${right2}` %> <% } %> \ No newline at end of file diff --git a/themes/yilia/source-src/template/script.html b/themes/yilia/source-src/template/script.html index 54eeaad..a695750 100644 --- a/themes/yilia/source-src/template/script.html +++ b/themes/yilia/source-src/template/script.html @@ -2,6 +2,7 @@ <% var right = '%' %> <% var right2 = '>' %> -<% for (let chunk in htmlWebpackPlugin.files.chunks) { %> -<%= `${left} js('js/${chunk}.${htmlWebpackPlugin.files.chunks[chunk].hash.substr(0,8)}.js') ${right}${right2}` %> -<% } %> +<% for (let index in htmlWebpackPlugin.files.js) { %> +<% let jsFile = htmlWebpackPlugin.files.js[index] %> +<%= `${left} js('${jsFile}') ${right}${right2}` %> +<% } %> \ No newline at end of file diff --git a/themes/yilia/webpack.config.js b/themes/yilia/webpack.config.js index 3665ca9..f305e68 100644 --- a/themes/yilia/webpack.config.js +++ b/themes/yilia/webpack.config.js @@ -10,97 +10,100 @@ const minifyHTML = { minifyJS:true } -module.exports = { - entry: { - main: "./source-src/js/main.js", - slider: "./source-src/js/slider.js", - mobile: ["babel-polyfill", "./source-src/js/mobile.js"], - viewer: "./source-src/js/viewer.js", - waifu: "./source-src/js/waifu.js" - }, - output: { - publicPath: '/', - path: __dirname+"/source", - filename: "js/[name].[chunkhash:8].js" - }, - module: { - rules: [ - { - test: /\.js$/, - use: { - loader: 'babel-loader', - options:{cacheDirectory: true} +module.exports = function(env, argv) { + // 是否是生产环境 + let isProd = argv.mode === 'production' + return { + entry: { + main: './source-src/js/main.js', + slider: './source-src/js/slider.js', + mobile: ['babel-polyfill', './source-src/js/mobile.js'], + viewer: './source-src/js/viewer.js', + waifu: './source-src/js/waifu.js' + }, + output: { + publicPath: '/', + path: __dirname+'/source', + filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js' + }, + module: { + rules: [ + { + test: /\.js$/, + use: { + loader: 'babel-loader', + options:{cacheDirectory: true} + }, + exclude: /node_modules/ + },{ + test: /\.(scss|sass)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + 'sass-loader' + ] + },{ + test: /\.css$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader' + ] + },{ + test: /\.(png|jpe?g|gif|ico)$/, + use: { + loader: 'url-loader', + options: { + limit: 1000, + publicPath: '../', + name: 'images/[name].[ext]' + } + } + },{ + test: /\.(svg|eot|ttf|woff2?|otf)$/, + use: { + loader: 'url-loader', + options: { + limit: 1000, + publicPath: '../', + name: 'fonts/[name].[hash:6].[ext]' + } + } + } + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css', + chunkFilename: '[id].css' + }), + new OptimizeCssAssetsPlugin({ + assetNameRegExp: /viewer\..*?\.css$/g, + cssProcessorPluginOptions: { + preset: ['default', { discardComments: { removeAll: true } }], }, - exclude: /node_modules/ - },{ - test: /\.(scss|sass)$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader", - "postcss-loader", - "sass-loader" - ] - },{ - test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader", - "postcss-loader" - ] - },{ - test: /\.(png|jpe?g|gif|ico)$/, - use: { - loader: "url-loader", - options: { - limit: 1000, - publicPath: "../", - name: "images/[name].[ext]" - } - } - - },{ - test: /\.(svg|eot|ttf|woff2?|otf)$/, - use: { - loader: "url-loader", - options: { - limit: 1000, - publicPath: "../", - name: "fonts/[name].[hash:6].[ext]" - } - } - } - ] - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: "css/[name].[contenthash:8].css", - chunkFilename: "[id].css" - }), - new OptimizeCssAssetsPlugin({ - assetNameRegExp: /viewer\..*?\.css$/g, - cssProcessorPluginOptions: { - preset: ['default', { discardComments: { removeAll: true } }], - }, - canPrint: true - }), - new HtmlWebpackPlugin({ - inject: false, - cache: false, - minify: minifyHTML, - template: './source-src/template/script.html', - filename: '../layout/_partial/script.ejs' - }), - new HtmlWebpackPlugin({ - inject: false, - cache: false, - minify: minifyHTML, - template: './source-src/template/css.html', - filename: '../layout/_partial/css.ejs' - }), - new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{ - verbose: true, - dry: false, - }) - ], - // watch: true + canPrint: true + }), + new HtmlWebpackPlugin({ + inject: false, + cache: false, + minify: minifyHTML, + template: './source-src/template/script.html', + filename: '../layout/_partial/script.ejs' + }), + new HtmlWebpackPlugin({ + inject: false, + cache: false, + minify: minifyHTML, + template: './source-src/template/css.html', + filename: '../layout/_partial/css.ejs' + }), + new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{ + verbose: true, + dry: false, + }) + ], + watch: !isProd + } } \ No newline at end of file