fly-mydream

导航

 
webpack的基本使用

阅读指南：

  学习webpack之前，首先要有Node环境和npm。

一、学习Node.js的必上的几个网站:

  1. nodejs.org -nodejs的官方网站。
  2. npmjs.com – node的包管理网站，可以找到很多有用的源代码和程序。
  3. github.com-这里有大量与node.js有关的开源项目，是我们最好的学习地方。
  4. stackoverflow.com技术问答社区，有问题可以去这里进行提问。

二、安装Node.js

NodeJS的安装很简单，只要在官方按照你的系统下载对应的安装包，然后直接下一步下一步就可以轻松的安装成功。安装成功后可以打开命令行工具，输入node -v，来查看版本号，如果出现版本号，说明安装成功。

三、安装npm

安装完毕后，打开cmd工具，输入命令

 

npm  install  --save  mocha

 

注意：

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。

 

Webpack入门开始！！！！！

一、Webpack的基本使用

  1. webpack介绍:

webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS、coffee、样式（less/sass）、图片等都作为模块来处理和使用。大大提高了我们程序员的工作效率。举个例子：我们可以直接使用require（xxx）的形式来引入各模块，即使他们可能需要经过编译（比如JSX和sass），但我们无须再上面花费太多心思，webpack有着各种健全的加载器（loader）在默默处理这些事情。它可以部分代替gulp的功能。

  1. Webpack 安装

当然常规直接使用npm的形式来安装:

 

$npm install webpack -g

这里的npm是Node.js的包管理工具（但是网速不好的情况下，推荐使用cnpm进行安装）。这个命令就是：全局安装webpack， -g 是全局安装的意思。

还有另外一种方式：直接安装到项目的依赖里，也就是写入package.json

 

npm init

npm install webpack --save-dev

 

  1. 配置文件webpack.config.js

按照常规来说，每个项目下都应该配置有webpack.config.js文件，它的作用就如gulp的gulpfile.js 和Grunt的Gruntfile.js一样，就是一个配置项，告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。

重点:什么是入口文件？模块打包的起点称之为入口起点（entry point）。入口起点告诉webpack从哪里开始，并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文（contextual root）或app第一个启动文件。

  1. Hello World实例
    1. 建立index.html文件
    2. 建立main.js文件
    3. 建立webpack.config.js文件
    4. 安装live-server 并预览程序

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <script type="text/javascript" src="bundle.js"></script>

</body>

 </html>

Main.js

 

document.write("<h1>Hello World ! webpack</h1>");

Webpack.config.js

 

 

 

 

 

 

module.exports = {

entry: "./main.js",

    output: {

        filename: 'bundle.js'

    }

};

最后安装服务器，安装live-server,只要用npm install就可以安装了。

npm install live-server -g

live-server是一款简单的开发用的Http服务器。特点在静态文件进行修改后，会有自动加载的功能。（一般正式开发，不会使用到这个）

使用它主要有两个原因：

1、对Ajax的操作必须要有服务器的支持，比如用javascript去获取内容。

2、浏览器的自动更新，可以加快开发。你不需要安装任何浏览器插件或手动添加代码片段到您的网页代码里。

 

  1. Webpack配置多路口文件

 1、首先我们建立两个JavaScript文件，分别是main1.js 和main2.js。然后在里边输出 Hello world  和 Hello webpack 。

 

main1.js

 

document.write("<h1>Hello World!</h1>");

Main2.js

 

document.write("<h2>Hello Webpack!</h2>");

2、建立indx.html文件，引入bundle1.js和bundle2.js，这两个文件就是我们要打包的两个js文件。

Index.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <title>webpack example02</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <script type="text/javascript" src="./bundle1.js"></script>

    <script type="text/javascript" src="./bundle2.js"></script>

</body>

</html>

建立webpack.config.js配置文件。

module.exports = {

    entry: {

        bundle1: './main1.js',

        bundle2: './main2.js'

    },

    output: {

        filename: '[name].js'

    }

};

 

  1. 什么是loader

loader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源（资源的位置），例如：你可以使用loader来告诉webpack去加载一个css或者Babel文件。

loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

1．安装loader（你可以通过npm来安装loader）

 

$ npm install xxx-loader --save-dev

或者另外一种方式

1

$ npm install xxx-loader --save

2.css-loader实例

1、先建立一个html文件，并引入bundle.js文件。

index.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>

<html lang="en"> 

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <script type="text/javascript" src="./bundle.js"></script>

</body>

</html>

 

 

2、建立main.js文件，并用require引入app.css文件。

 

 

require('./app.css');

document.write('<h1>Hello Webpack!</h1>');

3、建立app.css文件，把body 的背景设置为红色。

App.css

body {

    

}

4、建立webpack.config.js配置文件，在里边加入加载器。

module.exports = {

    entry: './main.js',

    output: {

        filename: 'bundle.js'

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: 'style-loader!css-loader' },

        ]

    }

};

5、用npm 安装  css-loader  和style-loader

$ npm install style-loader --save-dev

$ npm install css-loader --save-dev

6、在控制台输入 webpack 进行打包 （这里的打包：cmd要进入到项目目录进行打包）

$ webpack

这样就用webpack的加载器成功打包了css样式文件。以后我们的html里就可以不用看到css的引入语句了。

  1. 使用webpack Image loader 加载图片

1、新建main.js文件， 创建img标签后，把src的值用require引进来。然后插入标签。

 

var img1 = document.createElement("img");

img1.src = require("./small.png");

document.body.appendChild(img1);

 

var img2 = document.createElement("img");

img2.src = require("./big.png");

document.body.appendChild(img2);

2、建立index.html文件，引入bundle.js

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <script type="text/javascript" src="bundle.js"></script>

</body>

</html>

3、建立webpack.config.js配置文件

 

 

 

 

 

 

 

 

module.exports = {

    entry: './main.js',

    output: {

        filename: 'bundle.js'

    },

    module: {

        loaders: [

            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },

        ]

    }

};

这里需要说明的是limit ，它的左右是如果图片的大小，小于8192bytes就以Data URL的形式引入图片，大于就用图片地址引用。

 

4、打开命令行，用cnpm 安装url-loader包。

 

$ cnpm install url-loader --save-dev

5、用webpack命令进行打包

$ webpack

 

  1. 使用webpack构建本地服务器

我们之前一直都在用live-server充当本地服务器，其实它和webpack是不搭的，我们可以利用webpack自带的webpack-dev-server来构建一个本地服务器。它让你的浏览器检测你的代码修改，并自动刷新修改后的结果，它是基于node.js构建。webpack-dev-server是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

1、安装webpack-dev-server

本地依赖

npm install --save-dev webpack-dev-server

全局安装

npm install -g webpack-dev-server

2、在webpack.config.js中配置devserver选项：

  • contentBase : 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录。
  • port ：设置默认监听端口，如果省略，默认为”8080″
  • inline : 设置为true，当源文件改变时会自动刷新页面
  • colors ： 设置为true，使终端输出的文件为彩色的
  • historyApiFallback ：在开发单页时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
  • host ： 主机地址，如果是开发本机搭建，需要使用本机IP地址，否则会报错。

配置文件如下：

module.exports = {

    entry: __dirname + '/main.js',

    output: {

        path: __dirname + '/',

        filename: 'bundle.js'

    },

    devServer: {

        contentBase: './', //本地服务器所加载的页面所在的目录

        host: '192.168.1.158', //本地IP地址

        colors: true, //终端输出结果为彩色

        historyApiFallback: true, //不跳转

        inline: true, //实时刷新

        port: '3333' //端口号

 

    }

}

 

 

3、在终端中输入命令，开启运行本地服务器。它不仅提供了服务器，还会监视我们的文件变化自动更新效果，但是它不是真正的打包，它类似于在内存中进行了打包。所以本地文件并没有变化。

 

webpack-dev-server

其实webpack构建服务器才是正道，如果你使用了webpack，那么尽量使用webpack-dev-server吧，一般公司项目测试环境搭建都是使用这个。

以上的内容的例子：参考jspang的技术博客

posted on 2018-01-18 13:42  fly-mydream  阅读(59)  评论(0)    收藏  举报
 
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3