成都web前端培训
成都达内金融街中心

18628200088

热门课程

web前端-webpack模块打包加载

  • 时间:2016-10-13 13:42
  • 发布:达内杨老师
  • 来源:达内

一、认识webpack

webpack是一款模块打包加载工具。它能够将各种资源、JS、CSS、图片等作为模块打包加载。本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正。

二、安装webpack

这里安装webpack的前提是已经安装的node.js和npm。下面进行webpack的全局安装:

$ npm webpack install -g

三、相关配置

每个使用webpack的项目必须有一个webpack.config.js文件。先上代码。下面是我在本次项目中编写的webpack.config.js文件:

1 var path = require('path')

2 var webpack = require('webpack')

3 var fs = require('fs');

4 var dir = './client/develop/view';

5 var readDir = fs.readdirSync(dir);

6 var entry = {

7  vendor: ['babel-polyfill','react','redux']

8 };

9 readDir.forEach(v => {

10  v = v.replace(/\.js$/, '');

11  entry[v] = dir + '/' + v;

12 });

13

14 module.exports = {

15  entry: entry,

16  output: {

17    path: path.join(__dirname, 'client', 'dist', 'js'),

18    filename: '[name].bundle.js',

19    publicPath: '/js/'

20  },

21  plugins: [

22    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),

23    new webpack.DefinePlugin({

24      "process.env": {

25        NODE_ENV: JSON.stringify("production")

26      }

27    })

28  ],

29  module: {

30    loaders: [

31      {

32        test: /\.js$/,

33        // loaders: ['babel?optional=runtime'],

34        loaders: ['babel?presets[]=es2015&presets[]=react'],

35        exclude: /node_modules/,

36        include: __dirname

37      }, {

38        test: /\.css$/,

39        loader: "style-loader!css-loader"

40      },

41      {

42        test:/\.json$/,

43        loader:'json'

44      },

45      // Optionally extract less files

46      // or any other compile-to-css language

47      {

48        test: /\.less$/,

49        loader: "style-loader!css-loader!less-loader"

50      }

51    ]

52  }

53 }

由上面长沙Web前端培训的老师输入的代码能够看出,webpack.config.js是有固定结构的,该结构主要体现在module.exports对象中:

1.输入接口

entry是页面入口文件配置,可以是字符串、对象、数组格式。下面分别对三种格式进行说明:

(1)字符串格式:当entry是字符串时,该字符串对应的模块会在webpack启动时加载。

(2)数组格式:该数组内所有模块都会在webpack启动时加载,数组的最后一个元素会作为输出。

(3)对象格式:此时会构建一个或多个bundle输出。在上面代码中entry是一个对象,启动webpack后,会在'__dirname/client/dist/js'路径下生成文件名为vendor和'

./client/develop/view'目录下所有文件的名称的bundle文件。

2.输出接口

export是对应的输出配置。该对象有下面三个属性:

(1)path:文件输出路径。说明了文件输出的位置。上面代码中文件输出路径为'__dirname/client/dist/js'。

(2)filename:文件输出名称。代码中文件输出名称为'[name].bundle.js','.bundle.js'为文件名后缀,'[name]'为entry对象中读取的文件名。

(3)publicPath:表示资源发布后的前缀地址。

3.插件引入

在本项目中使用两个插件

(1)CommonsChunkPlugin插件:它用于提取多个入口文件的公共脚本部分,然后生成一个common.js来方便多页面之间进行复用。

(2)DefinePlugin插件:用于接收字符串插入到代码当中。

4.加载器配置

加载器配置是最为关键的一块。该部分针对不同的文件类型分别调用不同的加载器来加载文件。

(1)JS文件加载

{

test: /\.js$/,

loaders: ['babel?presets[]=es2015&presets[]=react&presets[]=react-hmre&presets[]=stage-2'],

exclude: /node_modules/,

include: __dirname

}

代码中test为正则表达式,表示后缀为.js的文件使用loaders后面的加载器进行加载。

(2)CSS文件加载

{

test: /\.css$/,

loader: "style-loader!css-loader"

}

该部分表示加载后缀为.css的文件使用loader后面的加载器进行加载。

(3)json文件加载器

{

test: /\.json$/,

loader: 'json'

}

该部分表示json文件使用loader后面的加载器进行加载

(4)less文件加载器

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader"

}

该部分表示后缀为.less的文件使用loader后面的加载器进行加载

上面长沙Web前端培训的老师一共列举了四类文件加载。在webpack中还有很多文件加载器,在其他项目中如果需要加载其他类型文件,只需调用该类型文件加载器即可。

四、运行webpack

webpack.config.js编写完毕后,可以运行webpack来查看效果。运行步骤为:在webpack.config.js文件所在目录的DOS命令行直接输入webpack。

上一篇:web前端-js循环方式
下一篇:web前端-canvas贪吃蛇核心代码分享
选择城市和中心
贵州省

广西省

海南省