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