webpack的简单配置
本人刚开始也不会写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配置已经完成了,你可以安心写你的别的代码了