vue+webpack 组件化开发基本配置
2017-09-11 12:51
731 查看
package.json
{ "name": "xxx", "description": "vue test", "version": "1.0.0", "author": "xxxx", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.3.3", "vue-router": "^2.7.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.28.4", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.4.2", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" } }
webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: {} }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.less$/, loader: 'less-loader' } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true, port: 8081 }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
.babelrc
{ "presets": [ ["env", { "modules": false }] ] }
相关文章推荐
- 使用webpack+vue+less开发,使用less-loader,配置全局less变量
- 关于网页开发webpack基本配置.
- webpack + vuejs(都是1.0的版本) 基本配置(一)
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- Vue配置开发环境 npm+webpack
- vue 多项目 依赖webpack开发共用 配置
- 全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- webpack+搭建vue开发环境配置(二)
- vue-cli的webpack配置,迁移适用到react开发配置webpack
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
- vue webpack开发访问后台接口全局配置的方法
- Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?
- Vue-webpack项目配置详解
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- vue webpack自动化开发
- 在vue中用webpack打包之后运行文件问题以及相关配置
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址