webpack 简介和初步配置

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。查看详情1 、 查看详情2

• 首先全局安装webpack 或者 安装到项目依赖

  $ npm i -g webpack
  或者：
  $ npm i --save-dev webpack

• 分为开发模式和生产模式：

  项目结构模型为：

  

  deploy为项目部署用所在目录，src为开发模式源代码目录

• src/app.js 中的代码为：

   document.getElementById('test').innerHTML = 'I am test';

• src/index.html中的代码为：

  <div id='test'></div>
  <script src="bundle.js"></script>
  

• webpack 配置文件说明

  webpack.base.config.js 用于通用的配置
  webpack.deploy.config.js 用于生产模式部署配置
  webpack.develop.config.js 用于开发模式部署配置

• webpack.develop.config.js中的代码说明

  "use strict";
  const path = require('path');
  module.exports = {
    // 项目入口文件
    entry:path.resolve(__dirname,'src/app.js'),
    // 编译之后的输出路径
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js'
    },
    // 预处理模块加载器，暂时还没有用到
    module:{
        loaders:[
            {test:/\.css$/,loader:'style!css'}
        ]
    }
  }

• package.json 中配置的scripts脚本为：

  "scripts":{
     "develop":"webpack --config webpack.develop.config.js"
  }

• 运行打包脚本：先手动拷贝index.html到deploy目录下， 在cli下切换到根目录， 运行：

  $ npm run develop 就可把src中的app.js打包到 deploy 目录下，文件名为: bundle.js， 打开index.html ，页面上呈现 ： I am test

简单说明： 以上只是一些简单的配置处理