vue+webpack 组件化开发基本配置

来源:互联网 发布:wine for mac 手柄 编辑:程序博客网 时间:2024/06/06 21:00

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 }]    ]}



原创粉丝点击