webpack学习笔记<使用>

webpack 是模块打包器(module bundler)。

在 webpack 里，所有类型的文件都可以是模块，包含我们最常见的 JavaScript，以及 css 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更有效地管理这些文件。

使用步骤：

1.安装webpack

通过npm全局安装webpack: npm install webpack -g

2.初始化项目

在项目目录下打开命令窗口。

①创建package.json： npm init

②安装项目需要的模块，如react,react-dom之类的：npm install react@latest react-dom

其中@latest表示安装最新版本的react，可以指定版本号，如react@0.14.6

3.webpack配置

①在单页面应用里，项目通常会有一个入口（entry）文件，假设是 main.js，我们通过配置 webpack 来指明它的位置。同时用webpack打包后会生成一个文件，即也需要设定一个输出文件的路径与名称。

创建webpack.config.js文件，该文件名称是webpack的默认配置文件名称。

webpack.config.js文件内容为

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname, // 输出文件的保存路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

②由于React的文件需要jsx转换，且可能用到ES6的语法，需要下载loader，并在webpack.config.js中进行配置。

loaders的列表可以看：http://webpack.github.io/docs/list-of-loaders.html

在React中我们使用babel-loader,不再使用jsx-loader.

babel-loader使用方式：

(1)安装babel-loader: npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

(2)添加配置到webpack.config.js中，添加内容为

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

最终webpack.config.js完整内容为：

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname, // 输出文件的保存路径
        filename: 'bundle.js' // 输出文件的名称
    }，

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}
}

4.进行打包

在命令行中输入：webpack即打包，如果webpack --watch则在项目有变化时自动打包。