Hello, I encountered two problems when I run webpack --progress --config webpack.prod.js:
infomation shows delegated ./node_modules/vue/dist/vue.runtime.esm.js from dll-reference vendor_81e1521a878e34171326 42 bytes {0} [not cacheable], I don't know if [not cacheable] means everytime I will repack ./node_modules/vue/dist/vue.runtime.esm.js even if I change nothing.
I run the building command again and again, but the building time is almost the same.
this is my webpack config file (two files merged, both are in the root project folder):
webpack.common.js
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var name = process.env.NAME || 'main'
var processEnvConstants = {}
for (var key in process.env) {
processEnvConstants[key] = JSON.stringify(process.env[key])
}
var extractCSS
if (process.env.NODE_ENV == 'production') {
extractCSS = new ExtractTextPlugin(css/${name}.[contenthash:12].css)
}
else {
extractCSS = new ExtractTextPlugin(css/${name}.css)
}
var POSTCSS_LOADER = {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}
var BABEL_LOADER = {
loader: 'babel-loader',
options: {
presets: [
['vue-app', {
"targets": {
"browsers": ["ie >= 9"]
}
}]
],
"plugins": ["transform-vue-jsx"],
babelrc: false,
}
}
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const AutoDllPlugin = require('autodll-webpack-plugin');
var webpackCommon = require("./webpack.common.js")
var merge = require("webpack-merge")
var name = process.env.NAME || 'main'
var appFolder = process.env.APP_FOLDER || 'app'
function getOutputPath() {
if (process.env.COMMON) {
return path.resolve('../b/dist')
} else {
return path.resolve(../b/${appFolder}/dist)
}
}
Version: webpack 2.7.0
Hello, I encountered two problems when I run
webpack --progress --config webpack.prod.js:delegated ./node_modules/vue/dist/vue.runtime.esm.js from dll-reference vendor_81e1521a878e34171326 42 bytes {0} [not cacheable], I don't know if[not cacheable]means everytime I will repack./node_modules/vue/dist/vue.runtime.esm.jseven if I change nothing.this is my webpack config file (two files merged, both are in the root project folder):
var name = process.env.NAME || 'main' var processEnvConstants = {} for (var key in process.env) { processEnvConstants[key] = JSON.stringify(process.env[key]) }
var extractCSS if (process.env.NODE_ENV == 'production') { extractCSS = new ExtractTextPlugin(
css/${name}.[contenthash:12].css) } else { extractCSS = new ExtractTextPlugin(css/${name}.css) } var POSTCSS_LOADER = { loader: 'postcss-loader', // Run post css actions options: { plugins: function () { // post css plugins, can be exported to postcss.config.js return [ require('precss'), require('autoprefixer') ]; } } } var BABEL_LOADER = { loader: 'babel-loader', options: { presets: [ ['vue-app', { "targets": { "browsers": ["ie >= 9"] } }] ], "plugins": ["transform-vue-jsx"], babelrc: false, } }module.exports = { node: { fs: 'empty' }, resolve: { modules: [ path.resolve('./css'), path.resolve('./js'), path.resolve('./image'), path.resolve('./vue'), path.resolve('./jarsj/vue'), 'node_modules', 'js', 'vue', "css", ], alias: {
}, module: { rules: [{ test: /.js$/, exclude: /node_modules/, use: BABEL_LOADER, }, { test: /.css$/, use: extractCSS.extract(["css-loader"]), }, { test: /.less$/, use: extractCSS.extract(["css-loader", "less-loader"]), }, { test: /.scss$/, use: extractCSS.extract(["css-loader",POSTCSS_LOADER, "sass-loader"]), }, { test: /.vue$/, loader: 'vue-loader', options: { // extractCSS: true, loaders: { js: BABEL_LOADER, css: extractCSS.extract(["css-loader"]), less: extractCSS.extract(["css-loader", "less-loader"]), sass: extractCSS.extract(["css-loader", "sass-loader"]), // less: extractVueLESS.extract(["css-loader","less-loader"]), } // other vue-loader options go here } }, { test: /.(png|jpg|gif|jpeg)$/, loader: 'file-loader', options: { name: 'image/[name].[ext]' } }, { test: /.(svg|woff|woff2|ttf|eot)$/, loader: 'file-loader', options: { name: 'font/[name].[ext]' } }, ], }, performance: { hints: false }, plugins: [ extractCSS, new webpack.DefinePlugin({ 'process.env': processEnvConstants, }), ], }
var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') const AutoDllPlugin = require('autodll-webpack-plugin'); var webpackCommon = require("./webpack.common.js") var merge = require("webpack-merge")
var name = process.env.NAME || 'main' var appFolder = process.env.APP_FOLDER || 'app'
function getOutputPath() { if (process.env.COMMON) { return path.resolve('../b/dist') } else { return path.resolve(
../b/${appFolder}/dist) } }module.exports = merge(webpackCommon, { entry:
${name}.js, externals: { // jquery: 'jQuery', // vue: 'Vue', // 'vue-resource': 'VueResource', // 'vue-router': 'VueRouter', // vuex: 'Vuex', }, output: { path: getOutputPath(), publicPath: process.env.OSS && process.env.OSSURL || '/', filename:js/${name}.[chunkhash:12].js, chunkFilename:js/${name}.[chunkhash:12].js, }, plugins: [ new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }), new HtmlWebpackPlugin({ filename:html/${name}.html, // relative to output.path template:./html/${name}.template.html, minify: {}, }), new AutoDllPlugin({ inject: true, // will inject the DLL bundle to index.html debug: true, filename: '[name][hash].js', path: './dll', entry: { vendor: [ 'vue','vuex','vue-router','vue-resource','jquery' ] } }) ],})
if (process.env.OSS) { require('babel-polyfill') var OSSPlugin = require('webpack-oss-plugin') module.exports.plugins = (module.exports.plugins || []).concat([ new OSSPlugin({ exclude: /.*.(html|svg|woff|woff2|ttf|eot)$/, ossOptions: { accessKeyId: process.env.OSS_ACCESS_KEY, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, region: process.env.OSS_REGION, bucket: process.env.OSS_BUCKET, }, ossUploadOptions: {}, }), //// more plugins ]) }