webpack 初识

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 命令运行