webpack的简单配置

　　本人刚开始也不会写webpack配置，刚开始在网上搜索了了一些，看的也是刚刚理解，因此准备本身写下来，已做记念和贡献给像我同样不会配置的“童鞋”们！

一、建立webpack配置文件

　　在项目文件下建立一个webpack.config的js文件。

　　

二、配置文件建立好了，咱们就开始正式配置webpack了。

　　一、咱们要安装nodejs,应为webpack基于nodejs，nodejs能够点击这里下载；

　　二、安装完nodejs以后，咱们打开命令窗口，找到你的项目文件，在项目文件webpack.config.js文件所在的目录下

　　　　输入npm install webpack --save-dev（下载webpack依赖插件到本地项目中），下载完成以后，在大家的项目文件中（与webpack.config.js文件同级目录下）会自动建立node_modules文件夹，里面装的就是全部要的本项目要用的依赖插件（固然，如今只有一个webpack插件），咱们先用到什么先下载什么插件，若是有须要后面再下载。

 

　　说明：下图为在项目文件下，打开命名窗口，输入安装webpack插件

　　

　　说明：下图是下载webpack完成时

 

　　

 

　　说明：下图为项目文件下自动建立的node_modules

 　　

 

　　三、完成以上步骤以后，咱们开始真正的配置webpack了。

　　　　　　

/*
 *@内容：webpack的配置
 *@做者：web前端小白
 *@时间：2016/7/4
 * */

var webpack = require('webpack');
moudle.exports = {

    //配置入口文件，入口文件能够以对象的形式配置，也能够以数组的形式配置,后缀名能够省略
    /*
     * 对象形式配置入口
     * */
    //entry:{
    //    index:'./index'       //'./index.js'
    //},
    /*
     * 数组形式配置入口
     * */
    entry: [
        './index'       //'index.js'
    ],
    //输出文件出口
    output: {
        /*
         输出路径，在这咱们要手动建立一个文件夹，名字能够本身命名，
         输出的文件路径是相对于本文件的路径
         * */
        path: './dist',  //输出路径
        filename: '[name].bundle.js'     //输出文件名，文件能够本身定义，[name]的意思是与入口文件的文件对应，能够不用[name]，
    },
    /*
     * 标题：加载器（loaders）
     * 做用：须要下载不一样别的加载器，如css，js，png等等
     * */
    loaders: [
        {test: /\.js?$/, loaders: ['babel-loader']} //babel加载器能够把jsx的语法转换为js的语法，也能够把es6的语法标准转换es5的语法标准
        /*
         * 你能够在这配置别的加载器，写法是同样的
         * */

    ],
    /*
     * 
     * */
    resolve: {
        /*
         * 别名配置，配置以后，能够在别的js文件中直接使用require('d3')，将导入的文件做为一个模块导入到你须要的项目中，不用配置别也可会看成模块导入项目中，只是你要重复写路径而已。
         * */
        alias: {
            'd3': 'd3/d3.min.js'
        }
    }　　
}

四、以上是配置webpack的代码，配置完成以后，在你webpack.config.js文件所在的目录下打开命令窗口（能够借鉴第一步），输入webpack/webpack -w

 （编译，没改动一次代码，要从新再次输入webpack进行编译 / 自动编译，改动代码并保存以后，能够自动进行编译），但愿对像我同样的小白有所帮助。

 

结语：就这样简单的webpack配置已经完成了，你能够安心写你的别的代码了