webpack 学习

1、webpack介绍:

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

2、webpack的安装

npm install webpack -g

 

 

 我们还可以直接安装到项目的依赖里，也就是写入package.json

npm init

npm install webpack --save-dev

 

3、配置文件webpack.config.js

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

webpack.config.js   示例

1 module.exports = {
2 
3     entry: "./main.js",
4     output: {
5         filename: 'bundle.js'
6     }
7 };

 

 
安装live-server,只要用npm install就可以安装了
 
npm install live-server -g
浏览器  127.0.0.1:8080
 

live-server服务器介绍

live-server是一款简单的开发用的Http服务器。特点就是在你静态文件进行修改后，有自动加载的功能。

使用它主要有两个原因：

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

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

多入口文件（Multiple entry files）

 

 

建立两个JavaScript文件，分别是main1.js 和main2.js

index.html文件，引入bundle1.js和bundle2.js，这两个文件就是我们要打包的两个js文件

建立webpack.config.js配置文件

module.exports = {

    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'
    }
};

 

 

 

使用Webpack CSS  loader加载器

一、什么是loader

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

二、loader的解析

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

三、安装loader

npm install xxx-loader --save-dev

 

OR
npm install xxx-loader --save
 

四、CSS-loader 实例

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

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

 

2  app.css

3、建立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 进行打包

webpack

 

使用webpack Image loader 加载图片

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

1 var img1 = document.createElement("img");
2 
3 img1.src = require("./small.png");
4 document.body.appendChild(img1);
5  
6 var img2 = document.createElement("img");
7 img2.src = require("./big.png");
8 document.body.appendChild(img2);

 

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3  
 4 <head>
 5     <title></title>
 6     <meta charset="UTF-8">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8  
 9 </head>
10  
11 <body>
12     <script type="text/javascript" src="bundle.js"></script>
13 </body>
14  
15 </html>

 

 
3、建立webpack.config.js配置文件
 
 1 module.exports = {
 2     entry: './main.js',
 3     output: {
 4         filename: 'bundle.js'
 5     },
 6     module: {
 7         loaders: [
 8             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
 9         ]
10     }
11 };

 


 
4、打开命令行，用npm 安装url-loader包。
首先npm init
得到 webpack.json
 
在  
npm install file-loader --save-dev
 
npm install url-loader --save-dev

 

 
5、用webpack命令进行打包
 
webpack
 

使用uglify-js 压缩打包JS代码

 

一、webpack 插件机制介绍：

插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack的配置信息 plugins选定中指定。Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。

二、uglify-js介绍：

ugligy-js是一个用npm安装的JavaScript代码压工具，我们在grunt和gulp中经常使用。

用npm命令进行安装

npm install uglify-js g

 

最常用的方法

uglifyjs [input files] [options]

 

 

三、用Webpack中的uglify-js压缩Demo

 1 var webpack = require('webpack');
 2 
 3 module.exports = {
 4     entry: './main.js',
 5     output: {
 6         path: __dirname,
 7         filename: 'bundle.js'
 8     },
 9     plugins: [
10         new webpack.optimize.UglifyJsPlugin({
11             compress: {
12                 warnings: false
13             }
14         })
15     ]
16 };

 

 

 

使用webpack构建本地服务器

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

1、安装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地址，否则会报错
 1 module.exports = {
 2     entry: __dirname + '/main.js',
 3     output: {
 4         path: __dirname + '/',
 5         filename: 'bundle.js'
 6     },
 7     devServer: {
 8         contentBase: './', //本地服务器所加载的页面所在的目录
 9         host: '192.168.1.158', //本地IP地址
10         colors: true, //终端输出结果为彩色
11         historyApiFallback: true, //不跳转
12         inline: true, //实时刷新
13         port: '3333' //端口号
14  
15     }
16 }

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

webpack-dev-server

 

posted @ 2017-07-09 19:55  高中国流  阅读(204)  评论(0)  编辑  收藏  举报