一些packjson.js和webpack.js的配置

webpack.js

var webpack = require(‘webpack’);
var path = require(‘path’);

var precss = require(‘precss’);
var autoprefixer = require(‘autoprefixer’);
module.exports = {
// 入口文件地址，不需要写完，会自动查找
entry: ‘./src/main’,
// 输出
output: {
path: path.join(__dirname, ‘./dist’),
// 文件地址，使用绝对路径形式
filename: ‘[name].js’,
//[name]这里是webpack提供的根据路口文件自动生成的名字
chunkFilename: ‘[name].js’,
publicPath: ‘/release/dist/’
// 公共文件生成的地址
},
// 服务器配置相关，自动刷新!
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
grogress: true,
},
// 加载器
module: {
// 加载器
loaders: [
// 解析.vue文件
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 46: …e' }̲, /…/,
loader: ‘babel’,
exclude: /node_modules/
},
// 编译css并自动添加css前缀
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 112: …s' }̲, /…/,
loader: ‘style!css!sass?sourceMap’
},
// 图片转化，小于8K自动转化为base64的编码
{
test: /.(png|jpg|gif)KaTeX parse error: Expected 'EOF', got '}' at position 64: …2' }̲, /…/,
loader: ‘html-loader’
}
]
},
postcss: function() {
return [precss, autoprefixer];
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin(‘common.js’),
new webpack.ProvidePlugin({
Vue: ‘vue’,
$: ‘webpack-zepto’,
Zepto: ‘webpack-zepto’
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true
})
],
// .vue的配置。需要单独出来配置，其实没什么必要–因为我删了也没保错，不过这里就留这把，因为官网文档里是可以有单独的配置的。
// vue: {
// loaders: {
// css: ‘style!css!autoprefixer’,
// }
// },
// 转化成es5的语法
// babel: {
// presets: [‘es2015’],
// plugins: [‘transform-runtime’]
// },
// “plugins”: [[“component”, [
// { “libraryName”: “mint-ui”, “style”: true }
// ]]]
resolve: {
// require时省略的扩展名，如：require(‘module’) 不需要module.js
extensions: [’’, ‘.js’, ‘.vue’],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, ‘./src/filters’),
components: path.join(__dirname, ‘./src/components’),
vuex_path: path.join(__dirname, ‘./src/vuex’)
}
},
// 开启source-map，webpack有多种source-map，在官网文档可以查到
devtool: ‘eval-source-map’
}

packIson.js
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “webpack-dev-server --hot --inline”,
“build”: “webpack --progress --profile --colors --config webpack.production.config.js”
},
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“babel-plugin-component”: “^0.4.0”,
“imagesloaded”: “^4.1.1”,
“mint-loadmore”: “^0.1.2”,
“mint-ui”: “^0.2.8”,
“vue”: “^1.0.26”,
“vue-async-data”: “^1.0.2”,
“vue-cookie”: “^1.1.4”,
“vue-infinite-scroll”: “^0.2.3”,
“vue-lazyload”: “^0.8.2”,
“vue-resource”: “^0.9.3”,
“vue-router”: “^0.7.13”,
“vue-touch”: “^1.1.0”,
“vuex”: “^1.0.0-rc.2”,
“webpack-zepto”: “0.0.1”
},
“devDependencies”: {
“autoprefixer”: “^6.4.1”,
“autoprefixer-loader”: “^3.2.0”,
“babel”: “^6.5.2”,
“babel-core”: “^6.10.4”,
“babel-loader”: “^6.2.4”,
“babel-plugin-transform-runtime”: “^6.9.0”,
“babel-preset-es2015”: “^6.9.0”,
“babel-preset-stage-0”: “^6.22.0”,
“babel-runtime”: “^6.9.2”,
“browser-sync”: “^2.16.0”,
“css-loader”: “^0.23.1”,
“exports-loader”: “^0.6.3”,
“file-loader”: “^0.9.0”,
“gulp”: “^3.9.1”,
“node-sass”: “^3.8.0”,
“postcss-loader”: “^0.13.0”,
“precss”: “^1.4.0”,
“sass-loader”: “^4.0.0”,
“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”: “^8.5.3”,
“vue-style-loader”: “^1.0.0”,
“webpack”: “^1.15.0”,
“webpack-dev-server”: “^1.14.1”,
“weixin-js-sdk”: “^1.2.0”
}
}