webpack打包工具的使用一

webpack是前端模块化的打包工具，它会分析项目的结构，找到js文件、以及浏览器不能直接识别的less,sass扩展语言和es6新语法等，将它们转换成为浏览器可以识别的格式供浏览器使用。

下面就大概来演示一下webpack的一些基本使用流程：

创建一个文件夹，注意文件夹名不能是webpack，我创建的是webpack-demo。在该文件夹下面创建两个子文件夹，src----用来存放项目源码；dist—用来存放打包后的项目
在dist/src上右键第一个打开终端（显示出来的路径最后一段是创建的根文件夹名），先初始化一个管理包的文件：输入npm命令 “npm init -y”，回车

出来以下效果就说明初始化成功了，并且在文件夹中会多一个package.json的包管理文件：
输入npm命令安装webpack及webpack-cli， “npm i webpack webpack-cli -D”，然后回车进行下载/安装。其中-D表明这两个包是开发依赖包。
要稍微等一会出来以下效果就说明安装成功了：
在src文件夹下创建一个index.js文件，先随便输入一些内容

打开package.json,进行一些打包的配置
操作截图

"scripts": {
	//"build": "webpack 要打包的入口文件路径 --output 出口文件 --mode production
    "build":  "build": "webpack ./src/index.js --output ./dist/bundle.js --mode production"
 },

其中–mode 配置项有两种模式：
–mode development 开发阶段，代码不压缩
–mode production 上线阶段，代码压缩

在终端中输入命令 “npm run build” 回车，出现以下结果就说明打包成功了
当配置项比较多的时候我们直接在package.json的脚本里面直接写会不太方便，所以在根目录下面创建一个webpack.config.js文件专门用来配置webpack
当然也使用webpack.config.dev.js （开发阶段）或者webpack.config.prod.js （发布阶段）进行命名

webpack是基于node的,所以在配置的过程中可以使用node的语法
先用npm命令 "npm i path"安装一下path包。
—webpack.config.js

//引入path
const path = require('path')
module.exports = {
  //入口:都使用绝对路径
  entry: path.join(__dirname, './src/index.js'),
  //出口
  output: {
    //目录
    path: path.join(__dirname, './dist'),
    //文件名
    filename: 'bundle.js',
  },
  //发布模式(会压缩代码)
  mode: 'production',
}

–package.json

 "scripts": {
    "build": "webpack --config webpack.config.js"
  },

终端中输入命令 “npm run build” ，同样也可以打包成功。
以上简单打包js文件大概演示了打包的过程。接下来演示一下html,css,less,image等的打包配置。

在src下面新建一个index.html文件，我们来使用jquery写个隔行变色的效果。

<!-- ul>li{li$}*10 -->
 <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
        <li>li9</li>
        <li>li10</li>
    </ul>

下载jquery，“npm i jquery”，在html中引入jquery

	<script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="./index.js"></script>

设置样式
–index.js

$('li:odd').css('background', 'red')
$('li:even').css('background', 'blue')

运行之后的效果图：

使用es6的新语法在index.js文件里面引入jquery文件，注释html中引入的jquery

–index.html
```

```
–index.js
```
import $ from 'jquery'
$('li:odd').css('color', 'pink')
$('li:even').css('color', 'red')
```
显而易见的是使用es6的新语法不用再去一层层的找文件引入了，真的简化了好多！！！
此时再运行html文件会报错：
在终端输入命令“npm run build” 打包js文件，打包成功之后查看一下bundle.js会发现它帮我们引入了jquery。
我们现在需要把html文件也打包到dist文件夹去。下载html-webpack-plugin插件，命令“npm i html-webpack-plugin -D”，这个插件能够将指定要打包的文件注入到dist文件夹下面，并引入相关的js文件

出现下面效果则说明下载成功了：
接下来去配置一下html插件
–webpack.config.js
```
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
//使用插件,指定模板
new HtmlWebpackPlugin({
  template: path.join(__dirname, './src/index.html'),
}),
],
```
8.在终端输入npm命令“npm run build”，再次进行打包，之后在dist文件夹下面会多了index.html文件，运行一下，使用webpack打包之后确实帮我们把浏览器不能识别的es6语法自动转换了，我们才能在打包的文件夹dist下面的index文件成功运行出和之前一样的效果。

webpack打包工具的使用一

webpack是前端模块化的打包工具，它会分析项目的结构，找到js文件、以及浏览器不能直接识别的less,sass扩展语言和es6新语法等，将它们转换成为浏览器可以识别的格式供浏览器使用。

猜你喜欢