webpack+vue页面构建简介

利用webpack+vue页面构建说明简介

使用平台： win7(其他平台请自行查找相关参考资料)

安装服务：安装nodejs作为本地服务，下载相应的nodejs 安装后，在cmd命令行中输入 node -v 检测是否有对应的版本号的返回以确认安装成功。

安装管理包工具npm：npm nodejs下的工具管理包，在新版的nodejs中已经集成了npm, 在安装nodejs 成功后 在cmd命令行中输入 npm -v 检测是否有对应的版本号返回以确认安装成功。

项目构建：
    1.创建项目文件夹。
    2.创建package.json文件： 再创建好项目文件夹后，进入该目录，在该目录下输入命令 npm init 然后对应的输入改项目的名称和创建者的相关信息。（如果没有相关修改，一直回车即可）

    name:""//输入项目名称
    version:"<1.0.0>"//项目版本号
    description:""//项目描述
    entry point:<index.js>//入口文件
    author:""//创建者相关信息
    license:<ISC>//项目模块的协议(isc以一种开放源代码的许可证，更多协议自行设定)

这样便形成了初始的package.json 文件。
    3.安装该项目的依赖包：在package.json中添加我们需要的依赖包以及对应的版本号，该处主要安装的是依赖包对应的兼容版本。（也可根据自己的需求安装不同的版本，可参考semver文档）

    "dependencies": {
    "vue": "^1.0.28",
    "vue-router": "^0.7.13"
  },
  "devDependencies": {
    "autoprefixer-loader": "^2.0.0",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.18.0",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.3.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.4.2",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "vue-html-loader": "^1.2.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.14.0"
  }

在package.json中添加好之后 输入命令 npm install 所依赖的模块将会被自动添加，添加之后会形成一个新的文件目录 node_modules 该文件夹中包含了我们所安装的模块。也可不用整体安装模块，可以根据需要一个安装模块，在安装每一个时使用命令 npm install xxx(模块名和版本号),该命令安装后，package.json中不会出现对应的依赖包列表，要将其添加到package.json列表中，使用命令 npm install xxx(模块名和版本号) -D

4.webpack.config.js 的配置(以下仅作为参考)可根据自己的需要进行配置的调整

var path = require('path');
var webpack = require('webpack');
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
// 模块导入
module.exports = {
    // 入口文件地址，不需要写完，会自动查找
    entry: './src/main',
    // 输出
    output: {
        path: path.join(__dirname, './dist'),
        // 文件地址，使用绝对路径形式
        filename: '[name].js',
        //[name]这里是webpack提供的根据路口文件自动生成的名字
        publicPath: './dist/'
        // 公共文件生成的地址
    },
    // 服务器配置相关，自动刷新!
    devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true,
    },
    // 加载器
    module: {
        // 加载器
        loaders: [
        // 解析.vue文件
            { test: /\.vue$/, loader: 'vue'},
        // 转化ES6的语法
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
            //{ test: /\.js$/, loader: 'babel'},
        // 编译css并自动添加css前缀
            { test: /\.css$/, loader: 'style!css!autoprefixer'},
        //.less 文件想要编译，less就需要这些东西！来编译处理
        //install css-loader style-loader less-loader --save-dev
            { test: /\.less$/, loader: 'style!css!less?sourceMap'},
        // 图片转化，小于8K自动转化为base64的编码
            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
        //html模板编译？
            //{ test: /\.(html|tpl)$/, loader: 'html-loader' },
        ]
    },
    // .vue的配置。需要单独出来配置，其实没什么必要--因为我删了也没保错
    vue: {
        loaders: {
            css: 'style!css!less!autoprefixer',
        }
    },
    // 转化成es5的语法
    
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    
    resolve: {
        // require时省略的扩展名，如：require('module') 不需要module.js
        extensions: ['', '.js', '.vue'],
        // 别名，可以直接使用别名来代表设定的路径以及其他
        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    },
    // 开启source-map，webpack有多种source-map，在官网文档可以查到
    //devtool: 'eval-source-map'
    devtool: 'cheap-source-map'
};

更多参考
有关webpack的更多参考 （http://webpack.github.io/）
这篇文章完成较早了，一直没有发布，现在已经更新到vue2xx和webpack2xx,不过其中还有可参考之处，希望能对大家有所帮助。