webpack+vue.js快速入门教程

$ mkdir [project name]
$ cd [project name]
$ npm init

 
 


 
{{message}}
 

import Vue from 'vue'
new Vue({
 el:'body',
 data:{
 message:'test success!'
 }
});

# 全局安装webpack，webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

.demo{
 background-image: url('a.png');
}

module:{
 loaders:[
 {test:/\.(png|jpg)$/,loader:'url-loader&＃63;limit=8192'}
 ]
}

module:{
 loaders:[
 {test:/\.jade$/,loader:'jade'}
 //这里配置了让webpack识别jade的loader，其他类似，比如.vue
 //用于css文件的loader有两种写法
 {test:/\.css$/,loader:'style!css'}
 {test:/\.css$/,loaders:['style','css']}
 ]
}

var path = require('path');
module.exports = {
 entry: './src/main.js',
 //定义webpack输出的文件，我们在这里设置了
 让打包后生成的文件放在dist文件夹下的build.js文件中
 output: {
 path: './dist',
 publicPath:'dist/',
 filename: 'build.js'
 },
 module: {
 loaders: [
 //转化ES6语法
 {
 test: /\.js$/,
 loader: 'babel',
 exclude: /node_modules/
 },
 //图片转化，小于8K自动转化为base64的编码
 {
 test: /\.(png|jpg|gif)$/,
 loader:'url-loader&＃63;limit=8192'
 }
 ]
 },
 //这里用于安装babel，如果在根目录下的.babelrc配置了，这里就不写了
 babel: {
 presets: ['es2015','stage-0'],
 plugins: ['transform-runtime']
 }
}

echo>.babelrc

{
 "presets": ["es2015", "stage-0"],
 "plugins": ["transform-runtime"]
}

$ webpack