webpack的简单配置

cxg518

　　　　本人刚开始也不会写webpack配置，刚开始在网上搜索了了一些，看的也是刚刚理解，所以准备自己写下来，已作纪念和贡献给像我一样不会配置的“童鞋”们！
　　1、创建webpack配置文件
　　　　在项目文件下创建一个webpack.config的js文件。

　　2、配置文件创建好了，我们就开始正式配置webpack了。
　　1、我们要安装nodejs,应为webpack基于nodejs，nodejs可以点击这里下载；
　　2、安装完nodejs之后，我们打开命令窗口，找到你的项目文件，在项目文件webpack.config.js文件所在的目录下
　　输入npm install webpack --save-dev（下载webpack依赖插件到本地项目中），下载完成之后，在你们的项目文件中（与webpack.config.js文件同级目录下）会自动创建node_modules文件夹，里面装的就是所有要的本项目要用的依赖插件（当然，现在只有一个webpack插件），我们先用到什么先下载什么插件，如果有需要后面再下载。
　　　说明：下图为在项目文件下，打开命名窗口，输入安装webpack插件

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

　　　说明：下图为项目文件下自动创建的node_modules
　　 　　
　　3、完成以上步骤之后，我们开始真正的配置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'
}
}　　
}

　　4、以上是配置webpack的代码，配置完成之后，在你webpack.config.js文件所在的目录下打开命令窗口（可以借鉴第一步），输入webpack/webpack -w
　　（编译，没改动一次代码，要重新再次输入webpack进行编译 / 自动编译，改动代码并保存之后，可以自动进行编译），希望对像我一样的小白有所帮助。
　　结语：就这样简单的webpack配置已经完成了，你可以安心写你的别的代码了