vue+webpack+element-ui+git
webpack.config.js
const { resolve } = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const url = require('url') const publicPath = '' var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用 module.exports = (options = {}) => ({ entry: { vendor: './src/vendor', index: ['babel-polyfill','./src/main.js']//ES6的语法兼容 }, output: { path: resolve(__dirname, 'dist'), filename: options.dev ? '[name].js' : '[name].js?[chunkhash]', chunkFilename: '[id].js?[chunkhash]', publicPath: options.dev ? '/assets/' : publicPath }, module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] },
或者
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},//解决页面的scss文件不能解析的问题
{ test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }, { test: /\.html$/, use: [{ loader: 'html-loader', options: { root: resolve(__dirname, 'src'), attrs: ['img:src', 'link:href'] } }] }, // { // test:/\.css$/, // use:ExtractTextPlugin.extract({ // fallback:'style-loader', // use:'css-loader' // }) // }, // { // test:/\.scss$/, // loader:ExtractTextPlugin.extract({ // fallback:'style-loader', // use:'css-loader!sass-loader' // }) // }, { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.scss$/, exclude:/node_modules/, use: ['style-loader', 'css-loader', 'postcss-loader','sass-loader'] }, { test: /favicon\.png$/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }] }, { test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/, exclude: /favicon\.png$/, use: [{ loader: 'url-loader', options: { limit: 100000, name:'img/[name].[ext]?[hash]' } }] } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'manifest'] }), // new ExtractTextPlugin({ // filename:'[name].css', // disable:false, // allChunks:true // }), new HtmlWebpackPlugin({ template: 'src/index.html' }) ], externals:{//抽离第三方库 /*"vue":"window.Vue", "vue-router":"window.VueRouter"*/ }, resolve: { alias: { '~': resolve(__dirname, 'src') } }, devServer: { host: '127.0.0.1', port: 9001, proxy: { '/gonghui/': { target: 'http://172.16.81.36', secure: false, changeOrigin: true, pathRewrite: { '^/gonghui': 'gonghui' } } }, historyApiFallback: { index: url.parse(options.dev ? '/assets/' : publicPath).pathname } }, devtool: options.dev ? '#eval-source-map' : '#source-map' })
.babelrc
{ "presets": [ ["es2015", { "modules": false }] ] }
postcss.config.js
module.exports = { plugins: [ require('autoprefixer')() ] }
package.json
{ "name": "element-starter", "description": "A Vue.js project", "author": "yi.shyang@ele.me", "private": true, "scripts": { "dev": "webpack-dev-server -d --inline --hot --env.dev", "build": "rimraf dist && webpack -p --progress --hide-modules","dele": "rm -rf node_modules" }, "dependencies": { "body-parser": "^1.17.2", "element-ui": "^1.1.2", "vue": "^2.3.4", "vue-router": "^2.4.0" }, "engines": { "node": ">=6" }, "devDependencies": { "autoprefixer": "^6.6.0", "babel-core": "^6.21.0", "babel-eslint": "^7.1.1", "babel-loader": "^6.4.0",
"babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.13.2", "css-loader": "^0.27.0", "eslint": "^3.12.2", "eslint-config-enough": "^0.2.2", "eslint-loader": "^1.6.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.24.1", "node-sass": "^4.5.2", "postcss-loader": "^1.3.3", "rimraf": "^2.5.4", "sass-loader": "^6.0.3", "style-loader": "^0.13.2", "url-loader": "^0.5.8", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.1.8", "webpack": "^2.2.0-rc.4", "webpack-dev-server": "2.1.0-beta.12" } }
你要觉得这篇文章比较好,记得点推荐!