• webpack简单教程(1)--从零开始搭建一个webpack小例子


    基于Windows操作系统下搭建webpack的运行环境,这里采用npm环境,node.js官网下载最新版本的,

    这里忽略下载和安装,然后直接运行  Node 环境,如下图所示。

    检查一下,node版本和npm工具的版本确保是最新的,这里并不是最新版本的,

    如果版本都是最新的,那么就可以来直接搭建webpack一个小demo案例。

      1、在F盘中创建一个文件夹webpack

      2、在文件夹中创建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack demo</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
    </html>

      3、创建index.js  

    alert("webpack运行成功");

      4、创建webpack.config.js

    module.exports = {
        entry: './index.js',
        output:{
            filename:'./bundle.js'
        }
    }

      5、在文件夹空白处 shift + 右键 ,选中在此处打开命令窗口

      6、在命令行中输入 npm init 设置你的项目信息。(这里直接 Enter到结束或者输入命令 npm init -y)   这里推荐使用   npm init -y

       7、在命令行中输入 npm install webpack --save-dev   (局部安装--推荐)  也可以全局安装   npm install webpack --g

      8、在命令行中输入 webpack ,看到下图就可以打开我们的index.html页面, 可以看到弹出   “webpack运行成功”。

       9、如果我们想引入JQuery,那么就在命令行中输入 npm install jquery --save

       10、引入JQuery后,index.js添加并使用

    alert("webpack运行成功");
    var $ = require("jquery");
    alert($);

      11、在命令行中输入 webpack ,刷新页面就可以看到弹出的信息。

      

    从上面可以看出,只要你修改一次就要在控制台中输入一次webpack命令,那么有没有能够替代他的高效命令工具呢,答案是有的,就是用webpack-dev-server服务,

    只要在命令行输入  npm install webpack-dev-server --save-dev   进行安装。

      12、安装好后,就可以使用了,在命令行中输入 webpack-dev- server服务启动后会有提示本地访问路径一般是http://localhost:8080/ ,根据提示在浏览器中输入http://localhost:8080/index.html 就 可以访问到页面,然后修改一下index.js 里面的代码,这样保存好后 ,页面就能自动刷新。

    注意:如果在使用  webpack-dev- server   的同时,有其他软件已经使用了8080端口的话,可以在    “node_moduleswebpack-dev-serverin“  找到 webpack-dev-server.js

    打开后找到如下图进行修改

     

  • 相关阅读:
    HTML知识点链接
    Apache和PHP的安装
    MySql的安装
    MY_FIRSH_MODULE
    【PAT甲级】1053 Path of Equal Weight (30 分)(DFS)
    Atcoder Grand Contest 039B(思维,BFS)
    Codeforces Round #589 (Div. 2)E(组合数,容斥原理,更高复杂度做法为DP)
    Codeforces Round #589 (Div. 2)D(思维,构造)
    【PAT甲级】1052 Linked List Sorting (25 分)
    【PAT甲级】1051 Pop Sequence (25 分)(栈的模拟)
  • 原文地址:https://www.cnblogs.com/webBlog-gqs/p/7435055.html
Copyright © 2020-2023  润新知