webpack 学习

时间 2019-11-08

标签 webpack 学习繁體版

原文原文链接

一、webpack介绍:

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

二、webpack的安装

npm install webpack -g

咱们还能够直接安装到项目的依赖里，也就是写入package.jsoncss

npm init

npm install webpack --save-dev

三、配置文件webpack.config.js

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

webpack.config.js 示例java

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服务器。特色就是在你静态文件进行修改后，有自动加载的功能。node

使用它主要有两个缘由：webpack

一、对Ajax的操做必需要有服务器的支持，好比用javascript去获取内容。程序员

二、浏览器的自动更新，能够加快开发。你不须要安装任何浏览器插件或手动添加代码片断到您的网页代码里web

多入口文件（Multiple entry files）

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

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

创建webpack.config.js配置文件

module.exports = {

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

使用Webpack CSS loader加载器

1、什么是loader

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

2、loader的解析

loader的解析相似模块，一个loader模块会导出一个方法而且可被nodejs写为可兼容的JavaScript,一般状况下经过npm来管理loader,但你也能够把loader放在本身的应用里。

3、安装loader

npm install xxx-loader --save-dev

npm install xxx-loader --save

4、CSS-loader 实例

一、创建main.js文件，并用require引入app.css文件

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

2 app.css

三、创建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

六、在控制台输入 webpack 进行打包

webpack

使用webpack Image loader 加载图片

一、新建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);

二、创建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>

三、创建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 };

四、打开命令行，用npm 安装url-loader包。

首先npm init

获得 webpack.json

在

npm install file-loader --save-dev
 
npm install url-loader --save-dev

五、用webpack命令进行打包

webpack

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

1、webpack 插件机制介绍：

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

2、uglify-js介绍：

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

用npm命令进行安装

npm install uglify-js g

最经常使用的方法

uglifyjs [input files] [options]

3、用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中进行配置以前须要单独安装它做为项目依赖。

一、安装webpack-dev-server 全局

npm install -g webpack-dev-server

二、在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 }

三、在终端中输入命令，开启运行本地服务器。它不只提供了服务器，还会监视咱们的文件变化自动更新效果，可是它不是真正的打包，它相似于在内存中进行了打包。因此本地文件并无变化

webpack-dev-server