webpack入门

1.webpack介绍

webpack是一个模块加载器兼打包工具。它是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。支持对react热插拔。

2.安装（使用淘宝镜像）

a.全局安装

cnpm install webpack -g

b.局部安装（安装在项目根目录下）

首先，自动生成package.json文件

cnpm init

其次，安装webpack

cnpm install webpack --save-dev

注意： 1.package.json文件配置这项目的所有依赖。

               可参考：http://www.cnblogs.com/tzyy/p/5193811.html。

             2.创建练习项目的时候可以不必介意，这些属性的配置，全部默认即可，实际项目使用还请遵照规则。

             3.package.json文件中不能存在注释，否则会编译报错。

3.配置

每个项目都必须有一个webpack.config.js配置文件。包含了webpack的配置信息。

var webpack = require('webpack');module.exports = {    //2、进出口文件配置    entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录    output: {//输出        path: __dirname+'/public',//输出路径        filename: 'bundle.js'//输出文件名    },    module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理        loaders: [            {//json加载器                test: /\.json$/,                loader: "json-loader"//注意-loader不能省略，网上说能省略，经测试编译会报错            },            {//5、编译es6配置                test:/\.js$/,                exclude:/node_modules/,                loader:'babel-loader',//在webpack的module部分的loaders里进行配置即可                query:{                    presets:['es2015','react']                }            },            {//3、CSS-loader                test:/\.css$/,                loader:'style-loader!css-loader'//添加对样式表的处理            }        ]    },    //4、服务器依赖包配置    devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了        contentBase: "./public",//本地服务器所加载的页面所在的目录        historyApiFallback: true,//不跳转        inline: true//实时刷新        //hot：true,//不要书写该属性，否则浏览器无法自动更新        //publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径    },    plugins:[]//插件}

在控制台输入：

webpack
将会打包一个js文件，上面打包的文件为public/bundle.js。

4.webpack-dev-server

webpack-dev-server是一个小心的nodejs express服务器，很适合做本地测试服务。

a.安装

cnpm install webpack-dev-server --save-dev

b.启动

默认启动命令：webpack-dev-server

webpack-dev-server默认以当前目录为根目录，我们可以使用--content-base来指定根目录。

例如：

webpack-dev-server --content-base bulid/

这里指定了根目录为bulid

c.自动刷新

webpack-dev-server支持2中刷新模式。

• iframe模式(页面放在iframe中,当发生改变时重载，代码会自动打包，但是浏览器不会自动刷新)

• inline模式(将webpack-dev-sever的客户端入口添加到包(bundle)中,代码会自动打包，浏览器会自动刷新)

iframe模式

使用该模式不需要任何配置，只需要以如下url格式访问即可：

http://host:port/webpack-dev-server/path例如：http://localhost:8080/webpack-dev-server/index.html

 inline模式
访问路径为：

http://host:port/path例如：http://localhost:8080//index.html

启用这种模式分为2种情况：
1 当以命令行启动webpack-dev-server时,需要做两点：
    (a)在命令行中添加--inline命令，即:webpack-dev-server --inline
    (b)在webpack.config.js中添加devServer:{inline:true}

2 当以Node.js API启动webpack-dev-server时,我们也需要做两点:
      (a) 由于webpack-dev-server的配置中无inline选项,我们需要添加webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口点中.

      (b)将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
例如：

module.exports = {        entry: {            app: [                'webpack-dev-server/client?http://localhost:8080/',                '.c/js/index.js'            ]        },        output: {            path: './dist/js',            filename: 'bundle.js'        }    }

注意：默认情况下，webpack-dev-server的端口为8080，监控的是localhost路径，如果需要设置其他路径和端口，可以在webpack.config.js的devserver中配置。