webpack--------相似gulp的工具，在gulp后面出来的

时间  2019-11-24
标签 webpack 相似 gulp 工具 后面 出来 栏目 JavaScript 繁體版
原文   原文链接

webpack和gulp的差别：css

webpack比gulp功能强大，升级换代出来的，webpack主要用于react vue  angular2html

1.webpack是什么？

CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；然后者则是异步加载，经过requirejs等工具适用于前端。随着npm成为主流的JavaScript组件发布平台，愈来愈多的前端项目也依赖于npm上的项目，或者 自身就会发布到npm平台。所以，让前端项目更方便的使用npm上的资源成为一大需求。前端

web开发中经常使用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。 webpack是一个module bundler(模块打包工具)，其能够兼容多种js书写规范，且能够处理模块间的依赖关系，具备更强大的js模块化的功能。Webpack对它们进行统 一的管理以及打包发布，其官方主页用下面这张图来讲明Webpack的做用vue

官网：http://webpack.github.io/docs/  node

Webpack-handlebook: http://zhaoda.net/webpack-handbook/react

Gitbook: http://fakefish.github.io/react-webpack-cookbook/index.htmljquery

参考网站：android

http://www.javashuo.com/article/p-nknsjncs-eh.htmlwebpack

https://github.com/ruanyf/webpack-demosgit

http://www.javashuo.com/article/p-ansmxtup-km.html

http://blog.csdn.net/yczz/article/details/49250623

https://github.com/petehunt/webpack-howto#8-optimizing-common-code

https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651220238&idx=1&sn=ebdba528f199e10f6b273c3a6fd04650&scene=0&key=b28b03434249256b7847bfdf62609ae5dc60fe6644c4c53f8f8e392425069ed2d9fa147c8c66f9d719456241c3a687ba&ascene=14&uin=MjYzMjMwMzE4MA%3D%3D&devicetype=android-21&version=26031031&nettype=WIFI&pass_ticket=3wAH%2BijJnBbvbS8rfC%2FF5Sv78DZDco29Ejqjt96dzxTLB72USiOBN69mnq9DFTFy

2.为何使用webpack(主要用于单应用程序)

1. 对 CommonJS 、 AMD 、ES6的语法作了兼容

2. 对js、css、图片等资源文件都支持打包

3. 串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持

4. 有独立的配置文件webpack.config.js

5. 能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间

6. 支持 SourceUrls 和 SourceMaps，易于调试

7. 具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活

8.webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快

3.快速开始

在项目根目录打开命令窗口引入项目依赖，全局安装

npm  install  webpack  -g // 全局安装webpack

1.1.1 建立配置文件

在项目根目录建立三个或多个webpack配置文件

（1）webpack.base.config.js  //公用的配置放在这里面（可经过插件继承）

（2）webpack.develop.config.js  //开发环境中用到的配置文件

（3）webpack.publish.config.js   //生产环境中用到的配置文件

1.1.2 修改配置文件

注意：开发环境的配置和生产环境的配置是不同的，具体的配置内容请看

http://webpack.github.io/docs/configuration.html

 

在项目根目录打开命令窗口引入项目依赖，全局安装

npm  install  webpack  -g // 全局安装webpack

1.1.1 建立配置文件

在项目根目录建立三个或多个webpack配置文件

（1）webpack.base.config.js  //公用的配置放在这里面（可经过插件继承）

（2）webpack.develop.config.js  //开发环境中用到的配置文件

（3）webpack.publish.config.js   //生产环境中用到的配置文件

1.1.2 修改配置文件

注意：开发环境的配置和生产环境的配置是不同的，具体的配置内容请看之后章节的介绍

详细的请看这里：

http://webpack.github.io/docs/configuration.html

 

// 这是最基本的一个配置文件

// 编写配置文件，要有最基本的文件入口和输出文件配置信息等

// 里面还能够加loader和各类插件配置使用

var path = require('path');


module.exports = {
    entry:path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
}

1.1.3 运行webpack

一、经过配置文件运行（通用）

（1）在根目录运行webpack的命令，默认会去查找名称为webpack.config.js的文件执行，若是没有就会报配置信息没有配置的错误。

Webpack

（2）这时候咱们能够经过运行下面的命令进行配置文件的选择

webpack –-config  webpack.develop.config.js

二、经过cli命令运行（了解）

（1）webpack的cli也提供了命令能够进行运行，例如：

Webpack  -watch       // webpack的监视命令，文件发生变化自动编译

webpack --entry ./entry.js --output-path dist --output-file bundle.js

  //配置文件的启动目录和输出目录

webpack 最基本的启动webpack命令

webpack -w 提供watch方法，实时进行打包更新

webpack -p 对打包后的文件进行压缩

webpack -d 提供SourceMaps，方便调试

webpack --colors 输出结果带彩色，好比：会用红色显示耗时较长的步骤

webpack --profile 输出性能数据，能够看到每一步的耗时

webpack --display-modules 默认状况下 node_modules 下的模块会被隐藏，加上这个参数能够显示这些被隐藏的模块

 webpack --display-error-details 方便出错时能查阅更详尽的信息（好比 webpack 寻找模块的过程），从而更好定位到问题。

（2）你能够运行webpack  -h查看webpack的其余命令，自行了解，或者经过英文官网了解webpack Cli部分

三、做为nodejs的api运行（了解）

var webpack = require('webpack');

webpack({

//configuration

}, function(err, stats){});

四、注意：可是咱们基本上不用这种直接提供的命令，由于咱们须要手动的敲打不少字母，咱们如今开发通用的方法都是使用配置文件的方式运行。

4.npm 的script的使用

一、你首先须要安装webpack，这时候不全局安装

npm i webpack --save

二、配置npm的package.json文件中

"scripts": {
             "test": "echo \"Error: no test specified\" && exit 1",
             "develop": "webpack --config webpack.develop.config.js",
             "publish": "webpack --config webpack.publish.config.js"
},

三、在根目录打开的命令窗口运行

npm  run  develop

5.为发布目录启动服务

一、安装webpack-dev-server

npm   i   webpack-dev-server   –save-dev

二、调整npm的package.json scripts 部分中开发命令的配置

{

 "scripts": {

 "develop": "webpack-dev-server  --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src",

"publish": "webpack --config webpack.publish.config.js",

"watch": "webpack --config webpack.develop.config.js --watch --hot"

 }

}

注释：

webpack-dev-server - 在 localhost:8080 创建一个 Web 服务器

--devtool eval - 为你的代码建立源地址。当有任何报错的时候可让你更加精确地定位到文件和行号

--progress - 显示合并代码进度

--colors -- hot，命令行中显示颜色！

--content-base  指向设置的输出目录//这点必定是咱们的发布目录

 

三、访问 http://localhost:8080 你会看到效果。

总的来讲，当你运行 npm run develop 的时候，会启动一个 Web 服务器，而后监听文件修改，而后自动从新合并你的代码。真的很是简洁！

四、注意

(1)用webpack-dev-server生成bundle.js文件是在内存中的，并无实际生成

(2)若是引用的文件夹中已经有bundle.js就不会自动刷新了，你须要先把bundle.js文件手动删除

（3）用webstorm的注意了，由于他是自动保存的，因此可能识别的比较慢，你须要手动的ctrl+s一下

5.浏览器的自动刷新

修改webpack.develop.config.js的配置中的entry：

var path = require('path');

module.exports = {
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname,'src/js/app.js')
    ],
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
}

6.经常使用的加载器

Loader：这是webpack准备的一些预处理工具

1>babel-loader：代码预处理加载器

 1.编译jsx和ES6到原生js

    jsx语法：容许html写在js文件中

  安装依赖项：

npm install babel-loader --save-dev
npm install babel-core   babel-preset-es2015   babel-preset-react  --save-dev

2.修改配置文件

module: {
    loaders: [
        {
            test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
            loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}

3.运行：

  直接重新运行npm run develop便可

2>css-loader ：css样式处理加载器

 1.下载依赖：

npm install css-loader   style-loader --save-dev

2.修改配置文件

{
     test: /\.css$/, // Only .css files
    loader: 'style!css' // Run both loaders  多个加载器，加载顺序是从右到左
}

！用来定义loader的串联关系，"-loader"是能够省略不写的，多个loader之间用“!”链接起来

 ***************************************************************

 css加载处理：

一、在主入口文件中，好比 src/app.js 你能够为整个项目加载全部的 CSS

Import  './project-styles.css';

CSS 就彻底包含在合并的应用中，不再须要从新下载。

二、懒加载（推荐）

若是你想发挥应用中多重入口文件的优点，你能够在每一个入口点包含各自的 CSS。

你把你的模块用文件夹分离，每一个文件夹有各自的 CSS 和 JavaScript 文件。再次，当应用发布的时候，导入的 CSS 已经加载到每一个入口文件中。

 

三、定制组件css

你能够根据这个策略为每一个组件建立 CSS 文件，可让组件名和 CSS 中的 class 使用一个命名空间，来避免一个组件中的一些 class 干扰到另一些组件的 class。

四、使用内联样式取代 CSS 文件

在 “React Native” 中你再也不须要使用任何 CSS 文件，你只须要使用 style 属性，能够把你的 CSS 定义成一个对象，那样就能够根据你的项目从新来考略你的 CSS 策略。

注意：这点的样式都没有-

 

3>sass-loader:sass加载器

 1.下载依赖：

    npm  install  sass-loader  --save-dev

 2.修改配置文件：

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

4>url-loader file-loader：图片加载器

1.下载依赖 
npm install url-loader  file-loader --save-dev

2.修改配置文件

{
      test: /\.(png|jpg)$/,
      loader: 'url?limit=25000'//?+limit=25000（图片大小超过limit的值）会将图片路径转换成字符串，反之是base64的字符串
      //base64会减小http请求（图片过小了，不用发送请求，）

 }

加载器，它会把须要转换的路径变成 BASE64 字符串，在其余的 Webpack 书中提到的这方面会把你 CSS 中的 “url()” 像其余 require 或者 import 来处理。意味着若是咱们能够经过它来处理咱们的图片文件。

url-loader 传入的 limit 参数是告诉它图片若是不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串。

3.大图片的处理方法：

在代码中是一下状况：
div.img{
    background: url(../image/xxx.jpg)
}

//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);
你能够这样配置
module: {
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

针对上面的两种使用方式，loader能够自动识别并处理。根据loader中的设置，webpack会将小于指点大小的文件转化成 base64 格式的 dataUrl，其余图片会作适当的压缩并存放在指定目录中。

处理结果:

After launching the server, small.png and big.png will have the following URLs.

<img src="data:image/png;base64,iVBOR...uQmCC">

<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

 5>处理font字体

{
      test: /\.(woff|eot|ttf|woff2|svg)$/,//多种字体格式
      loader: 'url?limit=100000'
}

7.部署策略

1>发布配置

   *：修改npm的package.json文件

"publish": " webpack --config webpack.publish.config.js  -p",

     指向生产的配置文件，而且加上了webpack的cli的-p,他会自动作一些优化

   *： 修改webpack.publish.config.js文件

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');

  module.exports = {
    entry: path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
                loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/, // 处理css文件
                loader: 'style!css' // Run both loaders
            },
            {
                test: /\.scss$/,  //处理sass文件
                loader: 'style!css!sass'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=25000'
            }
        ]
    }
}

能够看到，其实生产环境的配置和开发的配置没有太大的不一样，主要是把不须要的东西给去掉了

*：再运行     npm  run  publish

     最后会生成一个bundle.js文件

2>合并成单文件

           通常状况下只有在下面的状况下才使用单入口模式：

                一、应用很小

                二、不多会更新应用

                三、你不太关心初始加载时间

3>分离第三方包

   *：什么时候分离？？     

             当你的应用依赖其余库尤为是像 React JS 这种大型库的时候，你须要考虑把这些依赖分离出去，这样就可以让用户在你更新应用以后不须要再次下载第三方文件。当知足下面几个状况的时候你就须要这么作了：

            一、当你的第三方的体积达到整个应用的 20% 或者更高的时候。

            二、更新应用的时候只会更新很小的一部分

            三、你没有那么关注初始加载时间，不过关注优化那些回访用户在你更新应用以后的体验。

            四、有手机用户。

   *：修改配置文件

       

var webpack=require("webpack")；//在头部引入

结果：

 

注意：记住要把这些文件都加入到你的 HTML 代码中，否则你会获得一个错误：Uncaught ReferenceError: webpackJsonp is not defined。

4>和gulp的集成

分为使用流和不使用流

http://webpack.github.io/docs/usage-with-gulp.html

gulp + webpack 构建多页面前端项目

http://cnodejs.org/topic/56df76559386fbf86ddd6916

github-demo实际例子: https://github.com/MeCKodo/webpack

 8.经常使用插件

webpack提供了[丰富的组件]用来知足不一样的需求，固然咱们也能够自行实现一个组件来知足本身的需求：

plugins: [
     //your plugins list
 ]

详细的请看这里：

http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

注释：Word中出现的全部的包，均可以经过npm进行包查找，而后查看具体的使用方法；

1>压缩插件：这个插件是webpack自带的

2>提取css插件

在webpack中编写js文件时，能够经过require的方式引入其余的静态资源，可经过loader对文件自动解析并打包文件。一般会将js 文件打包合并，css文件会在页面的header中嵌入style的方式载入页面。但开发过程当中咱们并不想将样式打在脚本中，最好能够独立生成css文 件，之外链的形式加载。这时extract-text-webpack-plugin插件能够帮咱们达到想要的效果。须要使用npm的方式加载插件，而后 参见下面的配置，就能够将js中的css文件提取，并以指定的文件名来进行加载。

npm install extract-text-webpack-plugin --save-dev

我发现这个有一个问题，就是他只能把css抽出来，可是sass的样式不能分离出来。

var ExtractTextPlugin = require("extract-text-webpack-plugin");

3>建立index.html页面插件

html-webpack-plugin

4>自动打开浏览器插件

open-browser-webpack-plugin

https://github.com/baldore/open-browser-webpack-plugin

5> 提取js公共部分插件

CommonsChunkPlugin

6> 提取公共文件

写法二：

7>自定义公共模块抽取

8>ProvidePlugin插件

自动添加引用插件，全局暴露插件，直接使用

9>删除目录插件

clean-webpack-plugin

10>拷贝文件插件

copy-webpack-plugin

11> 合并配置文件插件

webpack-config

https://github.com/mdreizin/webpack-config

12>定义生产环境

new webpack.DefinePlugin({
//去掉react中的警告，react会本身判断
//
'process.env':{
    NODE_ENV:'"production"'//另外一个值是developer（自动帮你优化js代码）
}
})

9.其余知识：

 1.resolve属性：（自动帮你处理文件的扩展名，建议本身都写上文件扩展名）

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序能够自行补全哪些文件后缀：

resolve: {
        //查找module的话从这里开始查找
        root: '/pomy/github/flux-example/src', //绝对路径
        
        //自动扩展文件后缀名，意味着咱们require模块能够省略不写后缀名
//注意一下, extensions 第一个是空字符串! 对应不须要后缀的状况.
        extensions: ['', '.js', '.json', '.scss',’jsx’],
        
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 便可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

2. Externals属性

 // externals: {
    //     // 配置了这个属性以后react和react-dom这些第三方的包都不会被构建进js中，那么咱们就须要经过cdn进行文件的引用了
    //     // 前边这个名称是在项目中引用用的，至关于import React from  ‘react1’中的react，
    //     //'react1':"react",
    //     'react1':"react",
    //     'react-dom1':"react-dom",
    //     '$1':"jQuery"
    //
    // },

外部依赖不须要打包进bundle，当咱们想在项目中require一些其余的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中颇有必要。

好比：你在页面里经过script标签引用了jQuery：<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>，因此并不想在其余js里再打包进入一遍，好比你的其余js代码相似：

其实就是否是经过require或者import引入的，而是直接写在html中的js地址。

3.chunk(代码分割)

代码使用时才会去下载，不使用不下载，减小网络请求

http://webpack.github.io/docs/code-splitting.html

4.能够在服务端用webpack

node+webpack

5.热加载组件（不刷新浏览器就自动把新的东西更新出来）

http://fakefish.github.io/react-webpack-cookbook/Hot-loading-components.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程