webpack新手上路

webpack即模块打包工具，在 webpack 里，所有类型的文件都可以是模块，包含我们最常见的 JavaScript，以及 css 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更有效地管理这些文件。
不多逼逼，看下一下如何能简单的把webpack用起来。

安装webpack

• 全局安装
  

  $ npm install webpack -g

• 版本信息
  

  $ npm info webpack

• 安装指定版本
  

  $ npm install [email protected]

初始化一个项目

指定一个目录，如（D:/webpack/demo）

• 创建一个 package.json 文件，用于保存项目版本、依赖关系等
  

  $ npm init

• 在当前目录下安装 webpack
  

  $ npm install webpack --save-dev

• 在当前目录下创建index.html文件
  

• 在当前目录下创建webpack.config.js文件

 var webpack = require('webpack');
 var path = require("path");
 module.exports = {
 //插件项
 plugins: [new webpack.BannerPlugin('This file is created by liqiang')],
 entry: {page1: './entry.js'},
 output: {
 path: __dirname,
 filename: '[name].bundle.js'
 },
 module: {
 loaders: [
 //{test: /.css$/, loader: 'style-loader!css-loader'},
 {test: /.css$/, loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'},
 {
 test: /.js$/,
 loaders: ['babel-loader?presets[]=es2015'],
 exclude: /node_modules/
 },
 { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
 ]
 },
 resolve: {
 //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
 extensions: ['.css', '.js', '.json', '.scss'],
 //模块别名定义，方便后续直接引用别名，无须多写长长的地址
 alias: {
 js: path.join(__dirname, "./js")
 }
 }
 }
 //entry.js内容随便写，比如console.log(1)。
 

1. plugins 是插件项


2. entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）

   {
    entry: {
    page1: "./page1",
    //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
    page2: ["./entry1", "./entry2"]
    },
    output: {
    path: "dist/js/page",
    filename: "[name].bundle.js"
    }
    }

   该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。


3. module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理，可以理解为是模块和资源的转换器，我们可根据实际需要，加载不同的loader：

   module: {
    //加载器配置
    loaders: [
    // {test: /.css$/, loader: 'style-loader!css-loader'},
    {test: /.css$/, loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'},
    {
    test: /.js$/,
    loaders: ['babel-loader?presets[]=es2015'],
    exclude: /node_modules/
    },
    { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
    }

   注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
   拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
   

   npm install url-loader -save-dev

   
   配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。
   把其他loader加载完成

   $ npm install babel-loader babel-core babel-preset-es2015 --save-dev
    $ npm install autoprefixer-loader --save-dev



4. 最后是 resolve 配置，处理路径比较复杂的文件，使引用更加简单，且可省略文件后缀。看上面代码注释！

执行webpack

以上全部完成后，运行

$ webpack

你会看到根目录下生成了一个page1.bundle.js文件，在index.html中引用这个js。

这样打开index.html，会看到控制台输出了1。

打包的常用命令：

 $ webpack --display-error-details //显示详细信息
 $ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
 $ webpack --watch //监听变动并自动打包
 $ webpack -p //压缩混淆脚本，这个非常非常重要！
 $ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了

实时监测

在开发过程中，代码一直修改，我们可能不喜欢每次修改都要执行下webpack命令，因此我们可以webpack-dev-server 解决实时刷新页面的问题。
安装：

$ npm install webpack-dev-server -g

安装成功后运行：

webpack-dev-server --inline

运行没问题后，打开http://localhost:8080/index.html，页面就会在 js 文件变化后自动刷新了。