安装

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

定义配置文件

• 新建webpack.config.js
  (主要包括入口文件路径和打包后文件的存放路劲)

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

终端里运行webpack

(该命令会自动引用webpack.config.js文件中的配置选项)

loaders

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

Loaders的配置包括以下几方面：

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

一切皆模块

Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。

//安装
npm install --save-dev style-loader css-loader

//使用

module.exports = {

...
module: {
rules: [
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
};