码迷,mamicode.com
首页 > Web开发 > 详细

Webpack 4 学习01(基础配置)

时间:2019-02-24 10:44:20      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:user   压缩   文件   use   view   uil   mode   char   下一步   

一、安装配置

  • 前提】安装node.js环境

    【官网下载】https://nodejs.org/zh-cn/
    安装教程不赘述

  • 创建项目文件夹

    例如创建如下文件夹webpack_demo1

    技术图片

  • 创建配置项

    npm init -y

    生成一个package.json文件 如下图

    技术图片

  • 全局安装webpack (不推荐,进行下一步操作)

    npm install webpack -g
  • 局部安装webpack(推荐)

    npm install webpack --save-dev
    • 另外,webpack 4要求安装包
    npm install webpack-cli --save-dev

    一起安装

    npm install webpack webpack-cli --save-dev

    以下表示安装成功

    技术图片

  • 创建入口文件

    ./src/index.js

    技术图片

    任意编写index.js文件内容用于测试

  • 配置生产和开发模式

    打开package.json文件添加如下脚本

    "scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production"
    }

    技术图片

  • 现在运行:

    npm run dev

    生成dist/main.js ,其中 main.js 没有压缩

    npm run dev 表示开发模式

    技术图片

    npm run build

    此时的main.js 被压缩 ,这便是生产模式

    技术图片

  • 接下来看看打包的js文件是否能够使用

    • 创建index.html 引入打包好的main.js
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./main.js" charset="utf-8"></script>
    </head>
    <body>
    
    </body>
    </html>

    技术图片

    • 打开浏览器调试

      技术图片

?

? 输出结果表示打包成功,大功告成 !!!

?

?

?

?

Webpack 4 学习01(基础配置)

标签:user   压缩   文件   use   view   uil   mode   char   下一步   

原文地址:https://www.cnblogs.com/hunterxing/p/10425285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!