安装

1,安装node.js   （地址： https://nodejs.org/en/download/）同普通软件安装即可

终端上输入：node -v 、 npm -v即可查看当前安装版本

2，mac 下安装webpack直接使用npm install -g webpack 报错，解决方式：

    sudo npm install webpack -g --unsafe-perm=true --allow-root

3,安装完webpack ，运行webpack -v会提示你安装webpack-cli ,命令

sudo npm install webpack-cli  -g --unsafe-perm=true --allow-root

4，输入webpack-cli 会直接输出版本号，安装成功

安装cnpm:(可选)

sudo npm i -g cnpm --registry=https://registry.npm.taobao.org  --unsafe-perm=true --allow-root

项目中使用：

1，初始化生成package.json文件

npm init -y

2,安装webpack到该目录： 

npm install --save-dev webpack 

npm install --save-dev webpack-cli

3，使用webpack 编译

    4.0之后命令是：webpack ./src/app.js  --output-filename  bundle.js --output-path ./build

4，配置文件，使用webpack直接编译

webpack 配置文件在根目录下，名称为webpack.config.js

//配置文件

//执行webpack执行步骤

/**

* 1，首先webpack 发现，我们并没有通过的命令的形式给她指定入口和出口

* 2，webpack就会去项目的根目录中，查找一个叫做  webpack.config.js的配置文件

* 3，当找到配置文件后，webpack会解析执行这个配置文件，当解析完配置文件后，就得到了配置文件的配置对象

* 4，当webpack拿到配置文件之后，就拿到了配置对象中指定的入口和出口，然后进行打包构建

*/

5，使用webpack-dev-server实现自动打包功能

安装：npm install webpack-dev-server -D

使用配置：在package.json中添加配置

运行命令：npm  run  dev

删除掉本地的bundle文件，使用根路径的bundle

更改js文件之后，保存不需要刷新浏览器直接可以看到现象。

（在文件目录中看不到bundle.js文件，直接托管到了电脑的内存中，速度更快，可以认为与src dist 在同一级目录）

6，webpack-dev-server常用参数

webpack-dev-server --open  自动打开浏览器

webpack-dev-server --port 3000 设置端口

webpack-dev-server --contentBase  src  打开主页

webpack-dev-server --hot  页面无刷新重载

第一种方式：在package.json中更新配置：

webpack-dev-server --open --port 3000 --contentBase src  --hot

第二种方式：在webpack.config.js中配置：

const webpack =require('webpack')//启动热更新，第2步

7，html-webpack-plugin插件使用

作用：1，自动根据指定模版页面在内存中生成一个页面 2，自动把打包好的bundle.js追加到页面中

安装：npm i  html-webpack-plugin -D

使用：在webpack.config.js中配置

const htmlWebpackPlugin =require('html-webpack-plugin')

（使用此种方式可以将页面中引入的bundle.js文件删除，会自动将该文件追加到页面）

8，loader使用

情景：页面中引入css会发起二次请求，不推荐。在js文件使用import '../css/index.css' 导入css文件，webpack编译会报错，它默认只能打包处理js文件，不能处理其他文件。如果处理其他类型文件，需要安装loader加载器

安装：npm i  style-loader css-loader -D

使用：在webpack.config.js文件中进行配置

webpack loader的处理过程

less-loader，scss-loader使用

url-loader使用

安装：npm i  url-loader file-loader -D

配置：在webpack.config.js中的moudle-rules添加

        {test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader'}

传递参数：{test:/\.(jpg|png|bmp|jpeg)$/, use:'url-loader?{limit:1000}'}//限制是否转换为base64字符串

处理字体文件的处理:

{test:/\.ttf|eot$/,use:'url-loader' }

9，babel使用

情景：webpack 只能处理部分的ES6新语法，对于处理不了的语言结构需要借助loader把新语法转换成旧语法然后交给webpack进行打包处理

安装：第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

         第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

配置：

在项目跟目录新建.babelrc文件，配置如下：

然后重新启动项目即可正常显示。

webpack.config.js配置文件：