使用webpack搭建vue2.0框架

vue配合webpack可以帮助我们解决一些日常的问题，很不错，这里说下我研究的一些配置，算是做作业了。

第一步：我们先来看下都有哪些依赖和依赖的作用

babel-loader
//编译核心（语法层面）和babel-loader一起使用
babel-core          
//解析es6语法变成浏览器能识别的语法
babel-plugin-istanbul
babel-plugin-transform-runtime
babel-preset-env  
babel-preset-stage-2
百度了很多，但是最后实践出来的是只有上面的这些组合才能分析扩展运算符
可以把这些写入一个babelrc的文件里面，这个文件稍后也会贴出来

//css的加载器
css-loader
style-loader          
autoprefixer-loader //加前缀的依赖
//生成html文件的插件
html-webpack-plugin

//文件加载器
url-loader

vue
//vue的单文件的加载器
vue-loader
//编译 vue 的 template 部分
vue-template-compiler

webpack
//实时编译
webpack-dev-server

extract-text-webpack-Plugin//提取css的插件
clean-webpack-Plugin//删除文件的插件
add-asset-html-webpack-Plugin//把和manifest.json一起生成的js库插入index.html的插件

第二步：看下项目的结构

webpack.dll.js是打包公共js库，打包出来的文件放入了common里面，把公用库打包出来，这样一个js就不会很大。
webpack.config.js是打包中主要用到的文件
dist文件夹是打包完的文件
node_modules是打包使用的依赖
src是开发的文件
components是组件库
vendor是无法require的公共库
vuex是放数据的，类似与存放json文件的文件夹
app.vue是主vue，里面可以使用vue组件
main.js是打包入口
index.html是模板文件

第三步：打包文件webpack.dll.js

const webpack = require('webpack');
const path = require("path");
const CleanWebpackPlugin = require('clean-webpack-plugin');
//这里列出公用的require
const vendors = [
    'vue',
    'vue-router',
    'axios',
    'moment'
];

module.exports = {
    entry: {
        vendor: vendors,
    },
    devtool: '#source-map',//这个一定要有，不然主文件的打包会报错，虽然我还不知道原因。
    output: {
        path: path.resolve(__dirname, "common"),//文件打出来后放到哪里
        filename: '[name].dll.js',//文件名
        library: '[name]_[chunkhash]',//文件别称，和manifest.json里面的name一致，这样才能找到。
    },
    plugins: [
        new CleanWebpackPlugin(['common']),
        new webpack.DllPlugin({
            path: path.resolve(__dirname, "common", "manifest.json"),
            name: '[name]_[chunkhash]',//name是dll暴露的对象名，这里需要跟output.library一致       
            context: path.join(__dirname)  //这里需要跟主打包文件的DllReferencePlugin里面的context一致，我也不知道原因，这里可以省略。   
        })
    ]
};

第四步：重头戏来了，主打包文件webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-Plugin");
const CleanWebpackPlugin = require('clean-webpack-Plugin');
const ExtractTextPlugin = require("extract-text-webpack-Plugin");
const AddAssetHtmlPlugin = require('add-asset-html-webpack-Plugin');
const webpack = require("webpack");

module.exports = {
    entry: {
        index: path.resolve(__dirname, "src/main.js")
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name]_bundle.js?v=[chunkhash:8]"
    },
    module: {
        loaders: [{//这里是解决vue编译的问题。
            test: /\.vue$/,
            include: path.resolve(__dirname, "src"),
            loader: "vue-loader"
        }, {//这里是解决css编译的问题,使用第三方抽出可以帮我们把css提取出来
            test: /\.css$/,
            //loader: "style-loader!css-loader!autoprefixer-loader"
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!autoprefixer-loader"
            })
        }, {{//这里是解决js编译的问题,配合babelrc来做
            test: /\.js$/,
            loader: "babel-loader",
            include: path.resolve(__dirname, "src")
        }, {//这里是解决图片编译的问题
            test: /\.(jpg|gif|svg|png|ttf)$/,
            loader: "url-loader",
            include: path.resolve(__dirname, "src"),
            options: {
                limit: 409600,
                name: "[name].[ext]"
            }
        }]
    },
    resolve: {//这里如果配置了，我们的require里面就可以不用写.js或者.vue了
        extensions: [".js", ".vue"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),//删除dist文件夹
        new ExtractTextPlugin({
            filename: (getpath) => {
                return getpath('css/[name].css?v=[contenthash:8]');
            },
            allChunks: true
        }),//抽出css
        new webpack.DllReferencePlugin({
            context: path.join(__dirname),
            manifest: require("./common/manifest.json")
        }),//生成公用库
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: path.resolve(__dirname, "src/index.html"),
            inject: true
        }),//生成页面
        new AddAssetHtmlPlugin({
            filepath: path.resolve(__dirname, './common/*.dll.js')
        })//把公用库插入页面，这个插件我找了好久。
    ]
}

ps:babelrc贴出来

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

ps2:有想看实例的童鞋可以异步到我的github上传送门,如果你喜欢，可以帮我点个赞。