资讯专栏INFORMATION COLUMN

webpack从零开始搭建多页面(一):webpack起步到运行一个简单的demo

EsgynChina / 2737人阅读

摘要:文件夹用来存放供浏览器读取的文件,这个是打包成的文件。在文件下手动建立一个文件,并写入下面的代码。配置出口文件的地址在版本后,支持多出口配置。可以防止不同操作系统之间的文件路径问题,并且可以使用相对路径按照预期工作。

搭建webpack_demo1项目,使其运行起来

webpack的强大就不介绍了,我们直接动手做起来,我们从零开始一步步搭建一个多页面的系统,多参考webpack中文文档

cmd命令:

mkdir webpack_demo1             #创建文件夹
cd webpack_demo1                #进入文件夹
npm install -g webpack          #全局安装webpack
npm init                        #初始化
npm install --save-dev webpack  #安装webpack包

可以安装淘宝镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 上面的npm就可以写成cnpm

demo1的目录:

|——node_modules
├─dist           # 打包后的文件
|   ├─greeter.js #就放了一句话
|   |──main.js   #入口文件
├─src            #当前项目的源码
|   ├─greeter.js #就放了一句话
|  |──main.js    #入口文件
|——webpack.config.js #webpack配置文件
|——package.json      #依赖包
1、建项目目录并完成第一次打包
进入上我们建立的webpack_demo1目录,建立两个文件夹,分别是src文件夹和dist文件夹:
src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。

dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境。
在dist文件下手动建立一个index.html文件,并写入下面的代码。



    
    webpack_demo1


    
在src文件夹下建立main.js和greeter.js,编写我们的JavaScript代码,main.js是我们的入口文件。
在main.js文件里写: 
    const greeter=require("./greeter.js");
    document.getElementById("root").innerHTML = greeter();
在greeter.js文件里写:  
    module.export = function(){
        return "第一个webpack demo";
    };

第一次打包

在终端下 写命令:webpack "entry file" "destination for bundled file"

entery file: 入口文件的路径,这里就是src/main.js

destination for bundled file: 填写打包后存放的路径,这里就是dist/bundle.js

所以终端写:webpack src/entry.js dist/bundle.js(webpack非全局安装执行:node_modules/.bin/webpack src/main.js dist/bundle.js)

成功后,在dist文件夹下会出现一个bundle.js

2、通过配置文件来使用Webpack打包
在根目录下新建一个名为webpack.config.js的文件,
标准的webpack配置模板:
     module.exports={
        
         entry:{}, //配置入口文件的地址,可以是单一入口,也可以是多入口。
        
         output:{}, //配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
         
         module:{},//配置模块:主要是解析CSS和图片转换压缩等功能。
         
         plugins:[],//配置插件,用于生产模版和各项功能
        
         devServer:{} //配置webpack开发服务功能
     }
     
我们在其中写入如下所示的简单配置代码: 入口文件路径/打包后文件的存放路径:
    const webpack = require("webpack");
    const path = require("path");
    module.exports = {
        entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/dist",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名
        },
        module:{},
    
        plugins:[],
    
        devServer:{}
    };
    //__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
    

第二次打包 (先删掉dist中已有的bundle.js)

在终端下 写命令:webpack(wepack非全局安装执行:node_modules/.bin/webpack)

成功后,在dist文件夹下会出现一个bundle.js

3、更快捷的执行打包

在命令行中输入命令"node_modules/.bin/webpack"这样的操作是比较烦人的,不过值得庆幸的是npm可以引导任务执行,
对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令:

在package.json中对scripts对象添加一条下命令:"start": "wepack"

注意:package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,都不需要写前面那指明详细的路径了。

第三次打包:(先删掉dist中已有的bundle.js)

在命令行中输入:npm start
成功后,在dist文件夹下会出现一个bundle.js

使用webpack构建本地服务器
让浏览器监听你的代码的修改,并自动刷新显示修改后的结果: 

在终端输入:npm install --save-dev webpack-dev-server

在package.json中对scripts对象添加一条下命令用以开启本地服务器: "server": "webpack-dev-server --open"

在webpack.config.js中添加devServer:

 devServer:{
    contentBase:path.resolve(__dirname,"dist"), //设置基本目录结构,本地服务器所加载的页面所在的目录
    host:"localhost",//服务器的IP地址,可以使用IP也可以使用localhost
    inline: true,//实时刷新
    compress:true,//服务端压缩是否开启,一般设置为开启,
    historyApiFallback: true,//不跳转
    port:1818 //配置服务端口号,建议不使用80,很容易被占用,这里使用了1818
 }
 

在页面上已经可以看到一句话了" 第一个webpack demo ";

关于入口和出口配置的写法及其解释

entry入口:

单入口有以下写法:
    entry:  __dirname + "/src/main.js",
    entry:  "./src/main.js",
多入口有以下写法:
    entry:{
       index: "./src/main.js",
       selectList:"./src/***.js"
     },
     

output出口:

output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    // path:path.resolve(__dirname,"dist"),
    filename: "bundle.js"//打包后输出文件的文件名
    //filename:"[name].js"
    // filename:"js/[name].js"
    // filename:"js/[name].bundle-[chunkhash:8].js" 
},

filename: "[name].js"
filename: "[name]-[hash].js"
    打包文件名: main.js
                main-6672c04f6c9672410a61.js
                
filename:"js/[name].js":
    打包目录是:|——dist
               |    |——js
               |    |   |——main.js
  
filename:"js/[name].bundle-[chunkhash:8].js" :
      打包目录是:|——dist
                 |    |——js
                 |    |   |——main.bundle-d0dea2df.js
                 
[name]:是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件。

[chunkhash:8]: 数字和字母组成的8位哈希值

 __dirname:是node.js中的一个全局变量,它指向当前执行脚本所在的目录,打印出来是:webpackwebpack_demo1
 
 path:使用Node内置的path模块,并在它前面加上__dirname这个全局变量。
      可以防止不同操作系统之间的文件路径问题,并且可以使用相对路径按照预期工作。
         
建议使用:filename:"js/[name].bundle-[chunkhash:8].js":
可以通过命中缓存,以降低网络流量,使网站加载速度更快,
然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,
就会使用它的缓存版本。由于缓存的存在,当你需要获取新的代码时,就会显得很棘手。         

关于缓存:看文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107316.html

相关文章

  • 手把手教你从零搭建react局部热加载环境

    摘要:有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载,我们需要添加插件。 前言 用了3个多月的vue自认为已经是一名合格的vue框架api搬运工,对于vue的api使用到达了一定瓶颈,无奈水平有限,每每深入底层观赏源码时候都迷失了自己。 遂决定再找个框架学习学习看看能否突破思维局限,加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

    quietin 评论0 收藏0
  • 从零开始搭建个vue-ssr(下)

    摘要:开始改建补充安装依赖与上一次不同,这次我们基于进行改建,已经有了很多依赖库了,但我们任需要补充一个核心修改客户端的配置修改文件,添加插件添加了这个配置以后,重新启动项目通过地址就可以访问到,页面中出现的内容就是所需要的。 从零开始搭建一个vue-ssr 前言 上次我们已经实现了从零开始,搭建一个简单的vue-ssr的demo:从零开始搭建一个vue-ssr(上)。那么这次呢,我们基于v...

    Jochen 评论0 收藏0
  • 从零开始搭建Vue组件库——VV-UI

    摘要:各个大厂也相继宣布开源。但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们想自己开发一套属于自己的组件库,来增强对组件的可控性。 前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们...

    BothEyes1993 评论0 收藏0
  • 从零开始搭建Vue组件库——VV-UI

    摘要:各个大厂也相继宣布开源。但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们想自己开发一套属于自己的组件库,来增强对组件的可控性。 前言: 前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们...

    wthee 评论0 收藏0
  • 从零开始最小实现 react 服务器渲染

    摘要:从零开始最小实现服务器渲染前言最近在写的时候想到,如果我部分代码提供,部分代码支持,那我应该如何写呢不想拆成个服务的情况下而且最近写的项目里面也用过一些服务端渲染,如,自己也搭过的项目,确实开发体验都非常友好,但是友好归友好,具体又是如何实 showImg(https://segmentfault.com/img/bVMbjB?w=1794&h=648); 从零开始最小实现 react...

    cheukyin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<