Webpack介绍

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

webpack 中文地址:https://doc.webpack-china.org/

webpack集模块加载、前端文件打包的前端工具(简单写一点以后补充吧)

网站详细介绍了webpack 各种功能 以及重要的 webpack.config 的配置

  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 很快且在增量编译上更加快

Webpack安装

webpack通过 npm 命令进行安装

npm install webpack -g

还可以使用开发模式进行webpack的使用

$ npm init  // 初始化 package.json
$ npm install webpack --save-dev // 使用开发模式

Webpack配置

每个webpack工程都会有一个 webpack.cofnig.jsv 配置文件

他可以管理和引用当前项目所要使用库以及加载器

以下配置文件是由 webpack 1.x 标准构建的

2.x 兼容 1.x, 会在后续都使用 2.x 的配置作为示例

'use strict'
var webpack = require("webpack");

module.exports = {

    // 解析和加载的初始路径,一般在不设置的情况下默认使用当前文件路径
    context: __dirname + "",

    // 页面入口文件配置, 需要编译的文件路径
    // entry 接受三种值属性
    // 1.字符串 -> entry : "page1.js"
    // 2.数组 ---> entry : [ "page1.js", "page2.js"]
    // 3.对象 ---> entry : {  page1:"page1.js", page2:"page2.js" }
    entry:{
        index: __dirname + '/js/index.js',
    },

    // 入口文件输出配置
    // output.path 文件将要输出的路径
    // output.filaname 文件打包后的名称
    // [name] 默认为文件名
    // [hash] 打包前md5加密值
    // [chunkhash] 打包后md5加密值
    output:{
        path: __dirname + '/dist/js',
        filename: '[name]-[hash].js'
    },

    // 模块管理, 决定了如何处理项目中的不同类型的模块
    module:{
        //加载器配置
        loaders: [
            // test 通过正则表达式去匹配不同后缀的文件名
            // loader 选择当前文件要使用的加载器, 如果要使用多个加载器用 ! 连接
            { test: /\.js$/, loader: 'babel-loader' },
            { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
        ]
    },

    // 在webpack构建时对进行文件查找, resolve 的 extensions 属性用于自动补全的文件后缀
    // 扩展配置后 在使用 require('common') 同等于 require('common.js')
    resolve:{
        extensions:['','.js','.json']
    },

    // 组件管理
    plugins:[
        new XXX() ...
    ],

    // 打包第三方,或者外链的 cdn 使其在加载器中正常使用
    // 使用方式 var $ = require('jquery')
    externals:{
          jquery:'jQuery'
    }
}

webpack运行

1.在终端使用webpack 对某一个文件进行打包

webpack [目标文件地址].js [打包后输出地址].js

2.配置 webpack.config.js 内的参数后,通过配置文件内容进行打包

webpack --progress --display-modules --display-reasons --watch

webpack --config webpack.min.js //另一份配置文件

webpack --display-error-details //显示异常信息

webpack --watch //监听变动并自动打包 (实用!)

webpack -p //压缩混淆脚本,这个非常非常重要!

webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了

2.1可以将启动脚本配置至 package.json 后使用 npm便捷启动

编写脚本至 package.json



npm 命令运行

webpack 初识的更多相关文章

  1. webpack初识

    1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等) ...

  2. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  3. webpack初识!

    最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界 欢迎使用webpack 这个小教程通过简单的例子来引导大家使用webpack 通过这些这篇文章你可以学到 如何 ...

  4. webpack初识(biaoyansu)

    1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Nod ...

  5. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  6. webpack学习(二)初识打包配置

    前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...

  7. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  8. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

  9. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

随机推荐

  1. [LeetCode] Word Ladder 词语阶梯

    Given two words (beginWord and endWord), and a dictionary, find the length of shortest transformatio ...

  2. Cauchy 级数浓缩判别法

  3. 安卓任意两个或多个Fragment之间的交互与刷新界面

    平时项目中遇到一个问题:在子fragment中刷新父fragment的界面,通俗的说也就是在任何一个fragment中来刷新另一个fragment.大家都知道activity和fragment之间的交 ...

  4. 【JUnit4.10来源分析】6 Runner

    org.junit.runner.Runner它是JUnit作业引擎.它在许多类型的支持下的.处理试验和生产(Description).Failure和Result和其它输出. Runner参见图主类 ...

  5. LeetCode OJ combine 3

    public class Solution { public List<List<Integer>> combinationSum3(int k, int n) { retur ...

  6. Chapter 1 First Sight——25

    "They are… very nice-looking." I struggled with the conspicuous understatement. 他们都很好看,我与轻 ...

  7. dfs序和欧拉序

    生命不息,学习不止,昨天学了两个算法,总结一下,然而只是略懂,请路过的大佬多多谅解.   一.dfs序 1.什么是dfs序? 其实完全可以从字面意义上理解,dfs序就是指一棵树被dfs时所经过的节点的 ...

  8. 30.Django CSRF 中间件

    CSRF 1.概述 CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到你的网站上了,那么当这个用 ...

  9. python爬虫之网页解析

    CSS Selector 与Xpath path = ‘D:\\Postgraduate\\Python\\python_projects\\Python视频 分布式 爬虫Scrapy入门到精通\\第 ...

  10. [administrative][CentOS][NetworkManager] 万恶的NetworkManager到底怎么用

    这好像是第三次不得不去学会NetworkManager的用法,可是它真的很难用.社区里无人不吐槽. 然而,还是要用! 这次从redhat的文档入手,也许可以成功 --! https://access. ...