webpack3配置

哎呀，虽说现在已经出webpack4了，我自己也试着配置了一下webpack4，受到了webpack4一万点伤害以后我决定还是把3配置搞熟了（其实我是看了vue的脚手架也是用的webpack3）。不管了，现在能力有限，等以后了再弄4吧

1.全局安装webpack

npm install [email protected] -g 用mac的输入 sudo npm install [email protected] -g

2.查看是否安装成功webpack.

webpack --version

3.新建一个demo1目录

mkdir demo1

4.在demo1目录里新建一个src目录并且在src目录下新建main.js文件

mkdir src/main.js

5.输入npm init -y命令获得package.json文件

6.安装webpack到本地:npm install [email protected] -D 或者 npm install [email protected] --save-dev

7.命令行打包main.js

输入命令：node_module/.bin/webpack  src/main.js  dist/bundle.js

出现这个代表打包成功

到这一步的目录为这样

8.修改package.json中的script命令

如下图:

然后命令行输入npm run build

如图就代表打包成功

9.实现自动监听

修改package.json文件中的script命令,如下图

命令行输入：npm run watch  出现下图所示就代表成功打包

。

。

。

。

。

。

。

。。

10.好了，下面我们来到了配置webpack.config.js的配置文件

接下来我们只用在命令行输入webpack，出现如下图的信息就代表打包成功

11.接下来我们来看webpack怎么处理es6文件

在当前目录安装babel-loader和babel-core

安装babel-preset-es2015

配置webpack.config.js

当前目录下新建.babelrc文件

修改src目录下的main.js文件

此时查看打包出来的结果

webpack把es6编译打包成es5语法啦

..

12.接下来我们看webpack怎么压缩文件

在webpack.config.js文件下加入如下配置

查看打包出来的文件

已经把文字打包进去啦

下面看怎么把文件打包成压缩文件

此时查看打包的文件

打包成压缩文件啦

一般我们都只是在线上环境的时候才打包成压缩文件，所以下面来加入判断是否是线上环境

此时命令行输入webpack ,查看打包的文件如下，是未压缩的

接下来我们修改package.json文件

命令行输入 npm run production

查看打包出来的文件，可见此时打包出来的文件变为压缩文件啦

。

。

。

13.接下来我们看webpack怎么打包sass文件

npm安装css-loader style-loader sass-loader node-sass

然后配置webpack.config.js

main.js引入要打包的文件

webpack打包就行

；

14.webpack 如何将css与js分离

首先在当前目录安装插件

extract-text-webpack-plugin

然后配置webpack.config.js

webpack打包

然后发现多了一个style.css文件

这样css和js就实现分离啦

15.webpack怎么处理图片文件

安装file-loader

配置webpack.config.js

webpack打包后

url-loader当图片大小超过限制时，以base64形式输出

配置如下

（完）