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