webpack学习小结

刚入职的时候，勉大神，明叔手把手教学，本来早就该看懂学会了。

这刚恋爱的代码狗，2个月后，终于开始静下心学习了，对不起组内悉心栽培的小伙伴大神们。

1、webpack是什么

webpack是一个前端的模块化管理和打包工具。

2、webpack有什么用

webpack可以做到以下的几个方法

可以管理维护项目中的模块依赖；

(1)整合依赖，优化依赖，把每一个异步块都作为一个文件打包，加快前端的加载速度；

(2)可以能过loader转换各种资源文件，也就是说，具有处理所有类型文件的能力；

(3)可以解析任何类型的模块，AMD，CMD，普通的js都可以，这样就省去了转换第三方库的力气。

(4)强大的插件系统

(5)热编译，不需要重启前端服务器哦

3、webpack环境安装

安装webpack

npm install webpack -g

安装css的loader

npm install css-loader style-loader

安装开发服务器

npm install webpack-dev-server -g

4、上代码

一、命令行模式开启

index.html

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

entry.js

require("./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

module.js

// module.js
module.exports = 'It works from module.js.'

style.css

/* style.css */
body { background: yellow; }

跑起来吧

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

然后我们一起来看一下这一坨屎

二、开启配置模式

package.json

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "A simple webpack example.",
  "main": "bundle.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "ice",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
  }
}

npm install一下哦，安装一下依赖

webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /.css$/, loader: 'style-loader!css-loader'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by ice')
  ]
}

然后webpack一下就行了

最后备忘一下几条命令

带进度和颜色的编译

webpack --progress --colors

自动监控编译

webpack --progress --colors --watch

开发服务器运行方式

webpack-dev-server --progress --colors

显示故障信息

webpack --display-error-details

打完收工，睡觉