webpack起步

webpack介绍

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

安装

本地安装

npm install webpack --save-dev
npm install webpack@ --save-dev //安装指定版本的webpack

全局安装

npm install webpack -g

小试牛刀

webpack打包javascript模块

1.新建一个文件夹，进入文件夹右键打开git bush

npm init -y // npm初始化文件会自动建一个 package.json文件
npm install --save-dev webpack //本地安装webpack
./node_modules/.bin/webpack --help // windows下这个查看有没有安装好webpack，中文文档这里错了

2.在文件夹中新建一个app文件夹，并新建一个index.js

function component () {
  var element = document.createElement('div');

  /* 需要引入 lodash，下一行才能正常工作 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

3.在根目录下建一个index.html




    
    webpack2


    <--!这里引用的webpack打包以后的js文件-->

4.由于index.js里面引用了lodash.js所以本地必须安装lodash.js

npm install -save lodash

5.关键的一部，开始主角上场了

./node_modules/.bin/webpack app/index.js dist/bundle.js
webpack路径 要打包的文件 打包以后的路劲

U`$PNW_R2KUC3`53_(XUS~8.png

这样就打包成功了，我们会发现项目根目录下多了一个 dist文件夹，里面有个 bundle.js文件，这个就是我们打包后的文件
webpack除了会修改import/export以外不会修改你的代码，如果想使用es6语法需要使用Babel来编译

6.除了命令行的方式来完成打包，我们还可以通过配置文件的方式来实现，现在项目根目录新建一个webpack.config.js文件

var path = require('path');

module.exports = {
  entry: './app/index.js', //入口文件
  output: {
    filename: 'bundle.js', //完成打包以后的文件名称
    path: path.resolve(__dirname, 'dist') // 打包文件的目录位置
  }
};

这时候执行webpack命令

webpack --config webpack.config.js

380)_C9K2$Z6BIMMI~MHX}I.png

配置文件可以是我们灵活的是用webpack。使用配置文件，我们可以对bundle添加加载器规则、插件、解析选项，以及许多增强功能。

7.这种方式还是不是很方便，我们可以设置还可以在设置快捷方式，可以再package.json里面配置

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //配置在这里
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }
}

设置好了之后，通过npm run build 就可以启动了

8.文件目录如下

}NQ31WDS$Y_W}{[email protected]

9.这就是webpack最基本的用法

参考文档

webpack2