webpack 学习心得（一）

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

因为本人也正在学习webpack ，所以此篇文章比较入门。

首先你想使用webpack 需要安装node，推荐最好使用的是4.0以上（为了避免依赖安装错误）

npm install -g webpack

安装 webpack

你可以手动创建相应文件，也可以这样

mkdir webpackdemo
cd webpackdemo

创建 webpackdemo 文件夹 进入当前目录

我们需要一个 package.json 文件记录我们的使用依赖以及一些 demo 信息

这个我们通过

npm  init

输入名称 ，描述...（以为这个demo所以无所谓，可以一直回车）完成后，在当前文件夹下 会生成 package.json 文件

此时我们需要手动创建一个配置文件 webpack.config.js （我们每次编译文件时，会自动查找该文件）

  var webpack = require('webpack');
  var Promise = require('es6-promise').Promise;

module.exports = {
    entry:{
        init:'./mySuc/index'
    },
    output:{
        path:'./build',
        publicPath: 'build/', 
        filename:'[name].js'
    },
    module:{
        loaders:[{
                test:/\.css$/,
                loaders:['style','css']
            },{
              test: /\.(png|jpg)$/,
              loader: 'url?limit=1200&name=[hash].[ext]'

             }
        ]
    },
    // resolve.extensions 
    // 用于指明程序自动补全识别哪些后缀, 注意一下, 
    // extensions 第一个是空字符串! 对应不需要后缀的情况.
    resolve: {
        extensions: ['', '.coffee', '.js']
    }
}

entry  目标文件入口 在这里我命名的是 index.js 内容为

console.log("ok!"); 

output 输出设置

path 当前输出路径

publicPath 服务器输出路径

filename 文件输出名字

现在我们可以在当前目录 新建一个html ，引入编译后的 文件 init.js

现在我们在 用 webpack 编译，刷新页面 在控制台可以 看到 ok！

module 是我门加载文件使用的 依赖配置 我这里用的 css模块依赖 和图片 模块依赖

在加载配置前，我们需要在安装模块

加载css 模块（页面嵌入模式）

npm install css-loader style-loader --save-dev

 

加载图片打包模块

npm install url-loader --save-dev

 

着这里有一个bug 就是 node 版本是 5.7 的时候，加在css 模块是会出现一个错误

在此感谢群友的帮助 （雨神），解决的方式如下

npm install es6-promise@3.1.2

安装后在配置文件里面添加

var Promise = require('es6-promise').Promise;

到此一个简单的webpack demo 就完成了。