webpack初入

序言：前面已经倒腾了grunt、gulp、fis3,今天来经过一个例子玩玩webpack!最终预览

经过下面的例子，可以了解如下几点：

一、如何安装webpack

二、如何使用webpack

三、如何使用loader

四、如何使用webpack搭建本地web服务器

1、如何安装(这里使用的cnpm，我的感受比npm快)

输入如下命令进行全局安装：

cnpm install webpack -g

此时webpack已经生效以下图，(提示：一样基于node，请自行安装node.)

2、使用(主要是2个配置文件：package.json和webpack.config.js)

一、命令行进入demo03根目录：(该demo目录以下)

二、输入命令：cnpm init，自动快速package.json文件，此时demo03根目录下回自动生成一个package.json文件。

三、命令行输入：cnpm install --save-dev webpack，安装webpack依赖包;

四、命令继续输入：cnpm install --save-dev css-loader，安装css-loader依赖;

五、命令输入：cnpm install --save-dev style-loader，安装style-loader依赖;

六、在js目录下建立一个entry.js文件输入以下代码：

require('../css/style.css');//导入css
document.write("<h1><span>Life</span><span>is a</span><span>gradient</span></h1>");

七、在demo03根目录下建立一个webpack.config.js文件并输入以下配置：

/**
 * Created by Administrator on 2016/11/10.
 */
var webpack = require('webpack');
module.exports = {
    entry: './js/entry.js',//指定的入口文件
    output: {//输出
        path: './js/',//输出路径
        filename: 'bundle.js'//输出文件名
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
}

八、此时配置已经完成，命令行输入：webpack，以下：

编译结束后会在js目录下自动生成一个bundle.js文件，在html内运入该js文件并用浏览器打开以下：

九、搭建本地服务器：

继续命令行输入：cnpm install webpack-dev-server -g，全局安装webpack本地服务器，

等待安装完成后输入下面命令启动服务器：webpack-dev-server，默认地址：http://localhost:8080/或者http://localhost:8080/webpack-dev-server/

此时http://localhost:8080/下的页面跟本地打开的是同样的。

更详细的参考地址：www.jianshu.com/p/42e11515c10f#