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中，歡迎查看。