webpack入门

webpack的安装

node npm
如果node版本不够，先升级到最新版本
npm install -g n;
n stable 升级到最新稳定版
n lastest 升级到最新
进入项目目录，查看是否有package.json；有就直接下一步，没有就通过npm init创建，一直回车
安装web pack依赖 npm install webpack --save-dev
nam i webpack -D

webpack的打包

在entry.js中添加 require('./first.js'); index.html中引入的是bundle.js是webpack生成的文件
通过命令webpack entry.js bundle.js 打包

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
通过引入其他的loader，进而可以处理其它类型的文件

loader使用

$npm install css-loader style-loader --save-dev
添加一个style.css文件，entry.js添加 require("!style!css!./style.css"));
编译 webpack entry.js bundle.js
扩展名自动绑定loader
将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ,然后执行：webpack ./entry.js bundle.js --module-bind "css=style!css"

webpack配置

新建一个webpack.config.js,里面写入下面内容

var Webpack = require("webpack");
module.exports = {
    entry: ["./entry.js"],
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style!css"
        }]
    }
}

我们仅需要运行 webpack即可进行打包

webpack插件

在config.js的module中添加plugins配置项

webpack --watch自动监听，编译
启动服务
安装： npm install webpack-dev-server -g 运行：webpack-dev-server
webpack-dev-server 在localhost:8080启动一个express静态资源web服务器，并且会以监听模式自动运行webpack

文档地址： http://webpack.github.io/docs/
参考文章地址： http://www.w2bc.com/Article/50764