[原创] webpack使用-入门篇(二)

webpack js

2016-08-19 1304

webpack最强大的就是它提供的各种loader插件,通过这些插件可以把各种文件进行打包和模块化的载入.

如html-loader,能把一个html文件载入

var strTpl = require("!html!./tpl.html");

安装html-loader的方式为

    npm install html-loader --save


以上的一些配置信息都可以直接加在js代码中进行编写,但是这种写法看起来不是很友好。可以通过webpack.config.js配置文件实现一下配置文件的统一处理


module.exports = {
    entry: "./app.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
        resolve: {
        extensions: ['', '.js','.html']
    },
    module: {
        loaders: [
            { test: /\.html$/, loader: "html-loader" }
        ]
    }
};
上面代码中的entry 为代入口js文件,output为输出路径以及文件名更多节点如下
  • entry:指定打包的入口文件,每有一个键值对,就是一个入口文件
  • output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键(这里是entry1和entry2)替换
  • resolve:定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
  • module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装
  • plugins: 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js



直接运行 webpack 命令,其会自动搜索名为webpack.config.js的文件,执行打包处理

还有更多的loader加载器介绍 http://webpack.github.io/docs/loaders.html