首页 > Web开发 > 详细

webpack 的学习01

时间:2019-02-13 00:54:48      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:func   否则   我们   ack   效果图   文件路径   人工   解析包   表示   

1.webpack 的介绍

   1.1 什么是webpack    

          webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler) ,分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Sass TypeScript等),并将其打包转换为合适的格式供浏览器使用。

    1.2  为什么需要webpack

    一个程序往往以来很多模块,或者编译scss less 等如果依赖人工管理不太可能,这个时候我们就必须依赖webpack来解决。

2. webpack 的安装

   注意: 请先安装 node 环境

然后通过命令   npm install [email protected] -g   来安装webpack

    这里建议安装一下 nrm (方便随时切换镜像源)  

   1. win + r 打开运行窗口,输入cmd,打开命令窗口

   2. 命令  npm install nrm -g   来安装nrm

   3. 通过 nrm ls  来查看镜像源

   4. 通过 nrm use +镜像名  来切换镜像源,如 选择淘宝 nrm use taobao

效果图如下:

      技术分享图片   技术分享图片

3. 使用webpack 

   文件打包命令: webpack  输入文件路径(要打包的文件) 打包好的文件路径   这样就把一个文件打包成另一个文件

示例如下:

   新建一个JS文件为test1.js内容为:

 

function add (a, b) {
  return a + b
}
//用ES6语法 将add 函数暴露出去
module.exports = add;

 

  又建一个js 文件 为test2.js 内容为:

//引入test1.js
const add = require(‘./test1‘)
document.write(add(1,1))  //传参(1,1)通过引入的函数打印值

  新建一个HTML文件,名为text.html,并且引入test2.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>测试</title>
 8   <script src="./test2.js"></script>
 9 </head>
10 <body>
11   
12 </body>
13 </html>

结果:  正常情况下 ,HTML页面应该打印出值2, 即test2.js的结果 ,但是由于两个JS文件都是用的ES6语法,浏览器无法解析,这时就需要webpack来转换打包

命令窗口:

 

技术分享图片

 

此时,会额外生成一个JS文件。为index.js文件,然后在test.html中引入index.js文件  页面中显示打印的结果 2

4. webpack 中 loader 的配置和使用

   4.1 webpack-config 

    注意:   上述案例中,每当我们改变test2.js 文件中的实参数值时, 我们都需要通过重复执行命令 webpack ./test2.js ./index.js 。 这样工作将会十分繁琐,为此,我们来配置一下 webpack-config

   配制方法:  1. 新建文件 webpack-config.js 

       2. 通过mudule.exports 暴露一个对象,在对象中配置入口文件和输出文件 ,代码如下

 1 //引入path 模块
 2 const path = require(‘path‘)
 3 module.exports = {
 4   //配置入口文件 即要打包的文件
 5   entry: ‘./src/test2.js‘,
 6   //配置输出文件
 7   output: {
 8     //path 表示输出文件的路径  这使用node中 path.join 路径拼接方法  dist表示在当前文件夹下再创建一个dist文件夹
 9     path: path.join(__dirname, ‘dist‘),
10     //filename: 表示输出文件的名称
11     filename: ‘bundle.js‘
12   }
13 }

        3. 运行命令: webpack。创建出一个新的文件夹,里面包含有打包好的文件bundle.js.  然后将此JS 文件引入到test.html 中,代替其中的index.js 文件。

        技术分享图片          技术分享图片

4.2 webpack-dev-server   (实现:当改变test2.js文件中的值是,在我们保存之后 系统自动给打包并且自动打开浏览器)

    默认为  inline 模式(浏览器自动刷新)

配置步骤:

 1. 运行 npm init -y   会生成一个package.json的文件

 2. 运行 npm i [email protected] [email protected] -D    -D意思是安装到项目依赖,是-save-dev的简写   -S是-save的简写

 1 //引入path 模块
 2 const path = require(‘path‘)
 3 module.exports = {
 4   //配置入口文件 即要打包的文件
 5   entry: ‘./src/test2.js‘,
 6   //配置输出文件
 7   output: {
 8     //path 表示输出文件的路径
 9     path: path.join(__dirname, ‘dist‘),
10     //静态资源在服务器上运行时的访问路径,可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
11     publicPath: ‘/dist‘,
12     //filename: 表示输出文件的名称
13     filename: ‘bundle.js‘
14   }
15 }

3. test.html 中修改script 的src 路径文件