美文网首页
webpack打包模块工具-安装-使用

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

作者: jrg陈咪咪sunny | 来源:发表于2018-02-28 16:30 被阅读0次

    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/

    1. 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 入口路径 打包路径

    image.png

    打包成功文件显示,多了bundle.js


    image.png

    5.命令打开预览
    mac:open dist/index.html
    win:start dist/index.html

    open
    预览.png

    以上是简单的demo。

    其他配置:阮一峰的教程

    相关文章

      网友评论

          本文标题:webpack打包模块工具-安装-使用

          本文链接:https://www.haomeiwen.com/subject/zflbxftx.html