Webpack简明教程

Webpack是什么

一、安装

全局安装:

npm install webpack -g

安装完成之后，查看webpack命令的所有参数:

webpack –help

在项目目录安装webpack:
npm install webpack –save-dev

二、基本使用

初始化项目

npm init
npm install webpack

打包文件
假设项目文件结构如下：

/app
|–index.html
|–entry.js
|–name.js

index.html代码如下：

entry.js和name.js代码如下：

//name.js
module.exports = "www.magentonotes.com";
//entry.js
var name = require('./name');
document.getElementById('app').textContent = "hello~" + name;

执行打包命令：

webpack entry.js bundle.js

则会再当前目录生成bundle.js文件。

三、loader的使用

webpack默认只能处理JavaScript，用它处理其它的东西，比如 html，css等等，需要安装对应的loader;
loader有点类似转换器
安装loader

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

在项目中添加一个style.css文件，内容如下：

body{
  background: blue;
}

在entry.js新加入一行

require('style!css!./style.css');  //使用style和css的loader

四、配置文件

创建配置文件webpack.config.js，内容如下：

module.exports = {
  entry: './entry.js',  //打包的入口文件
  output: {
    path: __dirname,      //输出文件的路径
    filename: 'bundle.js' //输出文件的名字
  },
  module: {     //使用的模块
    loaders: [
      {test: /.css$/, loader: 'style!css'}  //test属性，用正则表达式判断文件的扩展名是不是CSS，loader属性指定具体要使用的css和style这二个loader
    ]
  }
};

执行webpack命令

五、source-map

source-map
使用：

webpack --devtool source-map

会生成一个bundle.js.map文件；
打开Chrome Browers 的 Developer Tools，Sources选项卡，可以看到多出一个webpack文件

六、安装webpack-dev-server

webpack-dev-server，生成一个服务器，可以监控文件变化，自动刷新网页等
安装webpack-dev-server

npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev

运行

webpack-dev-server --inline --hot

打开

open http://localhost:8080/

在浏览器的console里可以看到日志

七、webpack的应用

使用babal处理es2015的语法

安装

npm install babel-loader babel-core babel-preset-es2015 --save-dev

创建babel的配置文件.babelrc 内容如下：

{
  "presets": ["es2015"]
}

修改webpack.config.js文件，指定loader处理js文件

module.exports = {
  entry: './entry.js', 
  output: {
    path: __dirname,     
    filename: 'bundle.js' 
  },
  module: {     
    loaders: [
      {test: /.js$/, loader: 'babel'},
      {test: /.css$/, loader: 'style!css'}
    ]
  }
};

webpack+react+react-hot-loader

安装

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
npm install react react-dom --save

编辑webpack.config.js配置文件

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /.js$/, exclude: /node_modules/, loader: 'react-hot!babel'},
      {test: /.css$/, loader: 'style!css'}
    ]
  }
};

.babelrc文件内容如下：

{
  "presets": ["es2015", "react"]
}

name.js文件内容如下：

'use strict';

import React from "react";

class Name extends React.Component{
  constructor(props) {
    super(props);
  }

  render() {
    return (
      

        ~ www.magentonotes.com
      
    );
  }
}

export { Name as default};

entry.js内容如下：

'use strict';

import React from 'react';
import Name from './name';

React.render(
  ,
  document.getElementById('app')
);

修改package.json npm的配置文件，

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "watch": "webpack-dev-server --inline --hot"
  },

现在，可以执行命令,看效果了。

npm run watch
open http://localhost:8080

其他

webpack官方资料：http://webpack.github.io/docs/

Tagged as: webpack