webpack 配置文件

現現在，webpack很是的受歡迎，比較火的幾款js框架都推薦使用webpack來構建項目，而webpack也確實很是強大，可是配置webpack缺經常帶來不少問題，接下來就寫一下我本身遇到的一些坑。

首先是安裝webpack，如今安裝模塊通常是兩種，一種是全局安裝，一種是本地安裝，全局安裝只須要安裝一次，可是，全局安裝帶來一個問題，就是部分模塊使用會有問題，好比html-webpack-plugins，總是提示找不到模塊，嘗試了幾種方法，可是都無效，可能我電腦問題。反正本地安裝保險，其實每次作項目也不差這一個包。

npm install webpack --save-dev
//推薦使用淘寶鏡像，畢竟國內的快不少

關於webpack.config.js的配置

//引入兩個模塊在後面用，path用來解析路徑，webpack用來使用內置的一些模塊
var path = require('path')
var webpack = require('webpack')

module.exports = {
　　//入口文件，這個很重要
    entry: './src/main.js',
　　//輸出文件，當入口文件有多個，而且分別打包，filename使用[name].js,這樣就能夠根據入口文件名字給輸出文件命名
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
　　//這裏主要是各類loader的配置，webpack只能解析js，因此對於其餘中類的文件就須要各類loader來解析，可是也很方便。
　　//test中是正則表達式，用來匹配不一樣的文件，loader就是解析相關文件所須要的解析器，option是一些其餘選項

    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                
            }
        }, {
　　　　　　　//對於css最好style-loader和css-loader都寫上，還要注意書寫順序，關係到解析順序，尤爲是使用sass和less，webpack是從右到左加載loader的。
            test: /\.css$/,
            loader: 'style-loader!css-loader',
        }, {
            test:/\.scss/,
            loader:'style-loader!css-loader!sass-loader',
            exclude:/node_modules/
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/

        }, {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options:{
　　　　　　　　　　//這裏打包後能夠把全部的字體庫都放在fonts文件夾中
                name:'fonts/[hash].[ext]'
            }
        }]
    },
    resolve: {
        alias: {
　　　　　　　　//這裏是關於vue，官方下載的模板是vue/dist/vue.common.js,可是使用vue-router用到了template，因此記得更改
            'vue$': 'vue/dist/vue.js'
        }
    },
　　//這裏是關於熱加載的配置
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
　　//這裏是表示打包時使用source-map，打包以後調試會直接跳到source-map中，不再用看壓縮代碼。
    devtool: '#eval-source-map'
}

而後是關於使用，通常在package.json的scripts中配置，直接npm run ...;

在這裏依託於熱加載，若是想運行直接打開，在webpack-dev-server後面加上「--open」便可，--inline表示使用inline模式，另一種模式是frame，--hot表示熱更新，--progress表示顯示打包進度。

"dev": "webpack-dev-server --inline --hot",

"build": "webpack --progress --hide-modules"

大概就是這麼多，簡單使用仍是沒問題的。

最近用vue2.0和餓了麼的elementUI寫了個web端的項目，很小，可是基本都涉及到了，除了vuex。github地址：

https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter

以前寫過mint-ui的也在git中，歡迎查看。