WebPack使用(一)

标签(空格分隔):工具


webpack特点

  1. 丰富的插件
  2. 大量的加载器
  3. 代码分割,提供按需加载的能力
  4. 发布工具

webpack的优势

  • 以commonJS形式书写脚本,对AMD/CMD的支持也很全面
  • 能被模块化的不仅仅是JS
  • 打包,压缩,混淆,图片转base64
  • 扩展性强,插件完善,支持热插拔.

webpack的安装

1.全局安装命令

$ npm install webpack -g

2.使用webpack

$ npm init  # 会自动生成一个package.json文件
$ npm install webpack --save-dev #将webpack增加到package.json文件中

3.安装开发的工具

$ npm install webpack-dev-server --save-dev

webpack的配置

webpack的配置文件为webpack.config.js

例子:
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};
  1. plugins 是插件项,这里我们使用了一个 CommonsChunkPlugin的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。
  2. entry 是页面入口文件配置,output 是对应输出项配置 (即入口文件最终要生成什么名字的文件、存放到哪里)
  3. module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载
  4. 最后是 resolve 配置,配置查找模块的路径和扩展名和别名(方便书写)

一个简单的示例

1.配置文件

var webpack = require('webpack');
module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"//index与bundle文件平级与index.html平级
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

2.html文件

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>

3.安装加载器css-loader

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

4.入口文件编写

//在index.js中写入
document.write("看看如何让它工作!");
两种运行方式
  1. 直接运行webpack命令,然后打开index.html
$ webpack
  1. 安装服务器插件
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

打开localhost:8080即可运行

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,581评论 7 35
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 9,550评论 0 21
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 7,696评论 40 247
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,117评论 7 109
  • 怀念过去的时光,只是喜欢那份曾经的记忆 ——评作家张莹的散文故事集《半旧时光》 幽蓝 当我们经历人生痛苦的时候,希...
    蓝莲花0阅读 335评论 0 0
  • 前两天起床时,手机上看到消息,说杨绛先生去世了。一位女士被称为先生的,在我的第一反应中也只有她这一位了。不出所料,...
    息魇阅读 413评论 0 0
  • 王同学的第五十篇乱写 想学点什么,比如插花、心理学、瑜伽、厨师,想学的挺多的,就是不知道要选什么。但我知道,每天要...
    王雪梅2017阅读 45评论 0 0
  • -2016年10月31日-农历十月初一~星期一~晴~风力2级,空气质量优~-9/-2℃~ 凡事,尽力就不害怕了~ ...
    诺米Naomi阅读 231评论 2 8