webpack打包模块工具-安装-使用

2018-02-28 本文已影响0人 jrg陈咪咪sunny

Webpack是为浏览器构建JavaScript模块脚本的前端工具。
官网： https://webpack.github.io/docs/cli.html

运作步骤：

1.npm init
2.安装
3.添加文件
4.改文件
5.安装插件
6.打包
7.浏览器预览

1.安装

终端命令

1.--$ npm init 命令可以自动创建这个package.json文件,这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。

2.--$ npm config set loglevel http，让你知道 npm 发的每一个请求

3.--安装速度变快，运行
$ npm config set registry https://registry.npm.taobao.org/

2种选其中一个
//全局安装
--$ npm install -g webpack
//本地安装，到你的项目目录,前提git init一下。
--$ npm install --save-dev webpack

图片.png

3.验证安装成功
--$ webpack --help 如果看到类似下面的信息，就说明安装成功

图片.png ps:如果出现

图片.png

--方法.直接安装指定版本就行了，如安装 xx 版：
npm install --save-dev webpack@3.10.0

图片.png

安装成功后的文件

image.png

2.使用

文件结构：

image.png

2.--安装插件
$ npm install --save lodash
$ npm i babel-loader babel-core babel-preset-es2015 babel-preset-react

index.js 中打包 lodash 依赖，我们需要在本地安装 library
也可以安装其他包，jQuery......

3.文件配置
https://doc.webpack-china.org/guides/getting-started/#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA-bundle-%E6%96%87%E4%BB%B6

dist/index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
    <script src="bundle.js"></script>
   </body>
  </html>

src/index.js

  import _ from 'lodash';

  function component() {
    var element = document.createElement('div');
   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

4.把本地 src/index.js 打包成 dist/bundle.js

本地： ./node_modules/.bin/webpack 入口路径打包路径
全局：webpack 入口路径打包路径