Vue工程模板文件 webpack打包配置方法

2020-06-16 06:06:45易采站长站整理

}
}),
//js压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
//输出文件
filename: '../index_prod.html',
//模板文件
template: './src/template/index.ejs',
//不插入生成的 js 文件,只是单纯的生成一个 html 文件
inject: false
})
]});

(4)package.json文件


{
"name": "iview-project",
"version": "2.1.0",
"description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
"main": "index.js",
"scripts": {
"init": "webpack --progress --config webpack.dev.config.js",
"dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iview/iview-project.git"
},
"author": "Aresn",
"license": "MIT",
"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.2.1",
"iview": "^2.0.0-rc.8"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.9.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^11.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1",
"webpack-merge": "^3.0.0"
},
"bugs": {
"url": "https://github.com/iview/iview-project/issues"
},
"homepage": "https://www.iviewui.com"
}

ps:下面看下如何使用webpack打包vue项目?

1、安装nodejs:使用webpack打包需要用到npm,npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等),所以需要先下载安装nodejs,安装完成后使用npm -v查看是否安装完成;

2、安装cnpm(此步骤为非必须):因为npm安装插件是从国外的网站上下载的,由于网络影响,很容易就出现异常,cnpm是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 使用npm install -g cnpm –registry=https://registry.npm.taobao.org安装,之后可以使用cnpm来代替npm;