走进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，还是打包图片等文件，都离不开对它的设置，如何进行具体的设置，在其它文章中继续写。