Webpack3——使用

  1. 首先创建一个目录
  2. 进入该目录
  3. npm init 初始化npm项目
    《Webpack3——使用》 初始化
    初始化项目时,会给定很多问题,这里我将entry port改为bundle.js了,其余一律默认,如图:
    《Webpack3——使用》 npm init
  4. 此时在demo2文件夹中生成了一个package.json文件

    《Webpack3——使用》 package.json

  1. 虽然在全局安装了Webpack,在项目里边还要安装一遍

    《Webpack3——使用》 install webpack

    此时查看package.json文件,会发现多了一个依赖包

    《Webpack3——使用》 node-modules

  2. 此时可以进行打包了
    webpack ./src/bundle.js ./dist/app.bundle.js
    这句话表示将 src目录下的bundle.js文件打包到dist目录下的app.bundle.js文件(此文件第一次会自动生成)
    《Webpack3——使用》 打包
  3. 此时可以新建一个index.html目录来检验是否打包成功

    《Webpack3——使用》 目录结构

  4. html中引入打包后的文件

    《Webpack3——使用》 html中引入打包后的文件

  5. 自动监测修改后的文件,只需要添加参数:–watch
    webpack --watch ./src/bundle.js ./dist/app.bundle.js
  6. 编译后的文件太大了,需要对它进行压缩,此时用参数-p
    webpack -p ./src/bundle.js ./dist/app.bundle.js

此时给js文件添加点内容,可以发现正常打包成功了。

    原文作者:前端开发
    原文地址: https://www.jianshu.com/p/af24240806a1
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞