你的位置:首页 > Java教程

[Java教程]webpack初入


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

通过下面的例子,能够了解以下几点:

1、如何安装webpack

2、如何使用webpack

3、如何使用loader

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

一、如何安装(这里使用的cnpm,个人感觉比npm快)

输入以下命令进行全局安装:

cnpm install webpack -g

此时webpack已经生效如下图,(提示:同样基于node,请自行安装node.)

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

1、命令行进入demo03根目录:(该demo目录如下)

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

3、命令行输入:cnpm install --save-dev webpack,安装webpack依赖包;

4、命令继续输入:cnpm install --save-dev css-loader,安装css-loader依赖;

5、命令输入:cnpm install --save-dev style-loader,安装style-loader依赖;

6、在js目录下创建一个entry.js文件输入如下代码:

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

7、在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'}    ]  }}

8、此时配置已经完成,命令行输入:webpack,如下:

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

9、搭建本地服务器:

继续命令行输入: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#