webpack入门

Webpack可以使用npm安装，新建一个空的练习文件夹（本次练习命名为webpack），在命令行中转到该文件夹后执行下述指令就可以完成安装。

1、在命令行输入 以下命令（本次练习采用局部安装）如下图：

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

2、安装完webpack后，下一步创建package.json文件，package.json一个标准的npm说明文件，里面包括当前项目的依赖模块，自定义的脚本任务等。在命令行输入 npm init --yes命令可以自动创建这个package.json文件  如下图 表示创建成功

npm init --yes

3、在新建的文件夹（webpack）下创建两个文件夹app文件夹和public文件夹，app文件夹用来存放原始数据和自己写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。

接下来在public文件夹下创建一个index.html文件；  在app文件夹下创建两个js文件 Greeter.js和main.js  如图：

index.html文件

  
    
    
    
    
  
  
    
    
    

    
    
    
    <script src="bundle.js"></script>
  

Greeter.js文件

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件

var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

4、在命令行输入以下命令  如下图表示成功，同时public文件夹里生成bundle.js  如图

//全局安装 
webpack app/main.js public/bundle.js 
//安装到你的项目目录
node_modules/.bin/webpack app/main.js public/bundle.js

                                   

在浏览器打开index.html 可看到结果如下：

5、为了更加快捷的局部打包方式命令，可在package.json中对npm的脚本部分进行相关设置即可，设置方法如下：

"scripts": {
    "start" : "webpack"
 },

设置完成后，在命令行直接输入 npm start  就等价于之前输入的 node_modules/.bin/webpack……如图：

接下来 学习一种使用webpack方式----->通过配置文件来使用Webpack

(先把之前生成的bundle.js文件删掉）

1、在当前文件夹的根目录下（webpack）新建一个名为 webpack.config.js的文件，并配置文件，如下所示：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

2、在命令行执行 npm start (如果没有配置上一步的快捷局部打包方式就输入： node_modules/.bin/webpack app/main.js public/bundle.js) 命令，这条命令就会自动参考webpack.config.js文件中的配置选项打包你的项目，运行后结果如下：

 

使用webpack构建本地服务器

Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

1、在命令行输入下面这句指令：

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

2、在webpack.config.js文件中配置devserver命令，文件配置如下：

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

3、设置package.json中的npm脚本，设置方法如下

"scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server"
  },

4、设置好后，在命令行执行  npm run dev 命令 如下图：

5、在浏览器地址栏输入localhost:8080 即可访问到页面 如下图：

Loaders

通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：

• test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• ueqry：为loaders提供额外的设置选项（可选）

1、在命令行输入 npm install --save-dev json-loader 命令，安装可以转换json的loader 如下图：

2、在webpack.config.js文件下配置 modules关键字 具体配置如下：

module.exports = {
	devtool: 'eval-source-map',
  	entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  	output: {
    	path: __dirname + "/public",//打包后的文件存放的地方
    	filename: "bundle.js"//打包后输出文件的文件名
  	},
  	module: {//在配置文件里添加JSON loader
    loaders: [
	      {
	        test: /\.json$/,
	        loader: "json-loader"
	      }
	    ]
	},
  	devServer: {
	    contentBase: "./public", //本地服务器所加载的页面所在的目录
	    inline: true//实时刷新
  	} 
}

3、在app文件夹里创建config.json文件，把Greeter.js里的问候消息放在config.json文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值，配置方法如下

config.json文件

{
  "greetText": "Hi there and greetings from JSON!"
}

Greeter.js文件

var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

（把 bundle.js文件删除，重新测试一下）

4、在命令行执行  npm start 命令

5、在命令行执行 npm run dev 命令，（打开服务器）

6、在浏览器输入 localhost：8080  显示数据如下：

Babel

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

1、安装依赖包 在命令行执行下面的命令：

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

2、在 webpack.config.js  文件下配置Babel的方法， 配置方法如下：

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },

  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true
  }
}

现在webpack的配置已经允许使用ES6以及JSX的语法了。用上面的例子进行测试，不过这次会使用React。要使用React，首先得先安装 React 和 React-DOM，在命令行执行 npm install --save react react-dom 命令 ，如下图：

3、使用ES6语法，更新Greeter.js并返回一个React组件

Greeter.js文件

import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      
      
      

       
       
        {config.greetText}
      
      
      
    );
  }
}

export default Greeter

4、使用ES6的模块定义和渲染Greeter模块

main.js文件

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(
       
       , document.getElementById('root'));

5、把之前的bundle.js文件删除重新测试。在命令行执行 npm start 命令 

6、在命令行输入 npm run dev命令 启动服务器

7、在浏览器输入localhost:8080 结果如下图：

Babel的配置选项

考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：

webpack.config.js文件

module.exports = {
	devtool: 'eval-source-map',
  	entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  	output: {
    	path: __dirname + "/public",//打包后的文件存放的地方
    	filename: "bundle.js"//打包后输出文件的文件名
  	},
  	module: {//在配置文件里添加JSON loader
    loaders: [
	      {
	        test: /\.json$/,
	        loader: "json-loader"
	      },
	      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
        }
	    ]
	},
  	devServer: {
	    contentBase: "./public", //本地服务器所加载的页面所在的目录
	    inline: true//实时刷新
  	} 
}

.babelrc 文件

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