详解Webpack + ES6 最新环境搭建与配置

一，准备工作

1.下载node.js 和 npm

2.将镜像源替换为淘宝镜像

二，创建目录及安装webpack创建项目

在命令行中输入 npm init -y

我们看到了项目中多了一个package.json文件，它定义了这个项目中所需各种模板及项目中的配置信息。该对象的每一个成员就是当前项目的一项设置。详细设置信息请参考 https://docs.npmjs.com/files/package.json

安装webpack

全局安装webpack,在命令行输入

在webpack4中webpack和webpack-cli分开了，因此需要分开安装

当前目录下安装一个webpack

在命令行输入

什么是全局安装？

其中参数-g的含义是代表安装到全局环境里面，包安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。

全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令，如下图全局安装cnpm后的cmd文件

什么是本地安装

本地安装方式是输入命令：npm install eslint 或npm install eslint --save-dev等，其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中，包安装在我们执行命令的根目录下的node_modules文件夹下。本地安装后可以直接通过require()的方式引入项目中node_modules目录下的模块，如下示例，本地安装后直接在gulpfile.js中require('webpack')。如下图

我们在使用时，建议都使用本地安装，本地安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖。缺点就是安装时间较长，占用内存大，但是在磁盘越来越大的今天，他的缺点可以忽略。

使用webpack

1.我们在跟目录下创建一个文件夹src来存放源文件 2.在创建一个文件夹build来存放编译后的文件 3.新建index.html文件 4.创建配置文件webpack.config.js

创建index.html

Hi webpack4!

输入指令打包我们会发现，build下的index.html已经生成,并且指向了编译的后js

使用webpack打包图片和文件

我们新增资源文件夹asset 并添加一张图片

并将图片展示到页面

图裂了，找不到资源，大家应该都猜到了，应为在编译时，直接将

输入指令

<div class="jb51code">
<pre class="brush:js;">
/webpack.config.js/
var path = require('path');
var appPath = path.resolve(__dirname,loader: 'babel-loader?presets=es2015'
},{
//url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码)
//小于limit字节，以 base64 的方式引用，大于limit就交给file-loader处理了
//file-loader的主要功能是：把源文件迁移到指定的目录（可以简单理解为从源文件目录迁移到build目录
test: /.(jpg|png|gif)$/,loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]'
}
]
},]
}