走进webpack—我的webpack学习记录(1)

webpack是一款在前端工程化过程中的重要的打包工具（至少目前是），它丰富的插件，各种各样的loader，使得它能够完成许多任务。

下面记录我在学习webpack中的一些知识点。

安装(Ubuntu)

使用webpack首先需要安装，我是通过npm包管理器进行的安装。

有了npm后，进入目标文件夹，首先通过

npm init

进行初始化。

这时命令行会出现一系列选项让你填写项目名称，描述，作者之类的东西，可以直接按回车选择默认。

最后完成初始化后，在文件夹中应该有一个package.json文件，这里记录了你在初始化过程中的一些选项，当你以后安装了各种webpack的插件和loader之类的东西后，也会显示在其中。

下面通过

sudo npm install webpack -g

进行webpack全局安装。

然后通过

npm install webpack --save-dev

在目标文件夹安装webpack。

安装了webpack后，文件夹中应该有一个node_modules文件夹。

如何指定配置

你可以通过在命令行中指定参数执行webpack，也可以在目标文件夹下创建webpack.config.js文件设置参数。

PS：

如果你想让其它名字的文件作为配置文件，只需修改package.json。

例如：

(图中黑色竖线为光标，非 | ）

将默认的配置文件修改为了config.js 。

配置文件的结构

var path = require('path');module.exports = {    entry : {        entry1 : ['file1.js','file2.js'],        entry2 : 'file3.js',        entry2 : ['file4.js']    },    output : {        path : path.resolve(__dirname,'./dist'),//dist为生成文件的根目录        filename : 'js/[name]-[hash].js'//或其它名字    },    module : {        loaders : [            {                 test : /regExp/,                loader : 'approximate loader you have download'            },            {                 test : /regExp/,                loader : 'approximate loader you have download'            }        ]    },    plugins : [        new instanceOfYourPlugin(para),        new instanceOfYourPlugin(para)    ]       };

这是一个基本的配置文件的结构，无论你是要生成html页面，处理CSS和JavaScript，还是打包图片等文件，都离不开对它的设置，如何进行具体的设置，在其它文章中继续写。