webpack打包工具的使用一

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

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

1. 创建一个文件夹，注意文件夹名不能是webpack，我创建的是webpack-demo。在该文件夹下面创建两个子文件夹，src----用来存放项目源码；dist—用来存放打包后的项目
   

2. 在dist/src上右键第一个打开终端（显示出来的路径最后一段是创建的根文件夹名），先初始化一个管理包的文件：输入npm命令 “npm init -y”，回车
   
   出来以下效果就说明初始化成功了，并且在文件夹中会多一个package.json的包管理文件：
   

3. 输入npm命令安装webpack及webpack-cli， “npm i webpack webpack-cli -D”，然后回车进行下载/安装 。其中-D表明这两个包是开发依赖包。
   要稍微等一会出来以下效果就说明安装成功了：
   
   

4. 在src文件夹下创建一个index.js文件，先随便输入一些内容
   

5. 打开package.json,进行一些打包的配置
   

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

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

6. 在终端中输入命令 “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',
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

–package.json

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

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

1. 在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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

3. 设置样式
   –index.js

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

运行之后的效果图：

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

   –index.html

   <!-- <script src="../node_modules/jquery/dist/jquery.js"></script> 	-->
   1

   –index.js

   import $ from 'jquery'
   $('li:odd').css('color', 'pink')
   $('li:even').css('color', 'red')
   
   1
   2
   3
   4

   显而易见的是使用es6的新语法不用再去一层层的找文件引入了，真的简化了好多！！！
   此时再运行html文件会报错：
   

5. 在终端输入命令“npm run build” 打包js文件，打包成功之后查看一下bundle.js会发现它帮我们引入了jquery。
   

6. 我们现在需要把html文件也打包到dist文件夹去。下载html-webpack-plugin插件，命令“npm i html-webpack-plugin -D”，这个插件能够将指定要打包的文件注入到dist文件夹下面，并引入相关的js文件
   
   出现下面效果则说明下载成功了：
   

7. 接下来去配置一下html插件
   –webpack.config.js

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   plugins: [
   //使用插件,指定模板
   new HtmlWebpackPlugin({
     template: path.join(__dirname, './src/index.html'),
   }),
   ],
   1
   2
   3
   4
   5
   6
   7

   
   8.在终端输入npm命令“npm run build”，再次进行打包，之后在dist文件夹下面会多了index.html文件，运行一下，使用webpack打包之后确实帮我们把浏览器不能识别的es6语法自动转换了，我们才能在打包的文件夹dist下面的index文件成功运行出和之前一样的效果。
   
   还有关webpack非js文件的处理可以去看我的下一篇博客~~~
   webpack非js文件的处理