webpack小案例0

步骤
首先，install Webpack 和 webpack-dev-server.

cnpm i webpack webpack-dev-server -g

接下来就可以进行demo演示了.

webpack-dev-server

用浏览器访问 http://127.0.0.1:8080.

什么是webpack？
Webpack 是前端的打包工具类类似于 Grunt and Gulp.但是有区别，因为它是模块化构建机制，Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

webpack main.js bundle.js

它的配置文件是 webpack.config.js.

/* webpack.config.js */

module.exports = {
    entry : './main.js',
    output : {
        filename : 'bundle.js'
    }
};

有了webpack.config.js,你可以不带参数使用webpack

webpack

一些命令行选项你应该知道。

• webpack - 构建文件
• webpack -p 发布
• webpack –watch 监听项目
• webpack -d 包含source maps方便调试

• webpack –colors 让打包界面更好看

  去构建你的项目，你可以把启动项写进package.json

{
  "name": "webpackDemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "webpack-dev-server --devtool eval --progress --colors",
    "deploy" : "NODE_ENV=production webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}