使用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上傳送門,若是你喜歡，能夠幫我點個贊。