DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
webpack configuration:
const Webpack = require ("webpack")
const WebpackHtmlPlugin = require (" html-webpack-plugin")
const ExtractTextPlugin = require ("extract-text-webpack-plugin")
const CopyWebpackPlugin = require ("copy-webpack-plugin")
const path = require (" path")
function pathResolve (src) {
return path.join (_ dirname,".. /"+ src)
module.exports = {
entry: {
main: pathResolve("src/main.js"),
vendor: ["vue","vue-router"]
},
output: {
path: pathResolve("dist"),
publicPath: "/",
filename: "js/[name].[hash].js",
chunkFilename: "[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.vue$/,
include: [pathResolve("src")],
use: [{
loader: "vue-loader",
options: {
postcss: {
plugins: [require("autoprefixer")()],
},
loaders: {
css: ExtractTextPlugin.extract({
fallback: "vue-style-loader",
use: [{
loader: "css-loader"
}]
}),
less: ExtractTextPlugin.extract({
fallback: "vue-style-loader",
use: [{
loader: "css-loader"
},{
loader: "less-loader"
}]
})
}
}
}]
},
{
test: /\.js$/,
include: [pathResolve("src")],
use: "babel-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
},{
loader: "postcss-loader",
options: {
indet: "postcss",
plugins: [require("autoprefixer")({
browsers: ["last 2 version"]
})]
}
}]
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
},{
loader: "less-loader"
}]
})
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
name: "images/[name].[hash:7].[ext]"
}
}
}
]
},
resolve: {
extensions: [".js", ".vue", ".css"],
alias: {
"@": pathResolve("src")
}
},
plugins: [
new Webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minchunks: Infinity
}),
new Webpack.optimize.CommonsChunkPlugin({
name: "manifest",
minchunks: Infinity
}),
new ExtractTextPlugin({
filename: "style/style.[contentHash:8].css"
}),
// new Webpack.LoaderOptionsPlugin({ // css
// test: /\.vue$/,
// options: {
// transformToRequire: {
// img: "src",
// image: "xlink:href",
// "source": "src"
// },
// vue: {
// loaders: {
// css: ExtractTextPlugin.extract({
// fallback: "vue-style-loader",
// use: "css-loader"
// })
// }
// }
// }
// }),
new WebpackHtmlPlugin({
template: pathResolve("src/index.html"),
filename: "index.html",
inject: true,
minify: true
}),
new Webpack.DefinePlugin({
process_ENV: JSON.stringify("development")
}),
new CopyWebpackPlugin([{
from: pathResolve("static"),
to: pathResolve("dist/static")
}])
]
}
package.json:
{
"name": "firstcli",
"version": "1.0.0",
"description": "Vue-Cli",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --progress --config ./build/webpack.dev.config.js",
"build": "node ./build/webpack.production.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.22",
"vue-router": "^3.0.2"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.3.1",
"@babel/runtime": "^7.3.1",
"babel-loader": "^8.0.0-beta.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-notifier": "^5.3.0",
"ora": "^3.0.0",
"postcss-loader": "^3.0.0",
"ra": "^0.9.7",
"rimraf": "^2.6.3",
"shelljs": "^0.8.3",
"style-loader": "^0.19.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.0.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.2.1"
},
"repository": {
"type": "git",
"private": true
}
}