webpack从零开始搭建多页面（一）:webpack起步到运转一个简朴的demo

2024年2月13日 163次阅读 来源: 平平不平

搭建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文件，并写入下面的代码。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack_demo1</title>
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

在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中的一个全局变量，它指向当前实行剧当地点的目次，打印出来是：\webpack\webpack_demo1
 
 path:运用Node内置的path模块，并在它前面加上__dirname这个全局变量。
      能够防备差别操纵体系之间的文件途径题目，而且能够运用相对途径根据预期事情。

发起运用：filename:’js/[name].bundle-[chunkhash:8].js’:


能够经由过程掷中缓存，以下降网络流量，使网站加载速率更快，
但是，假如我们在布置新版本时不变动资本的文件名，浏览器可能会以为它没有被更新，
就会运用它的缓存版本。因为缓存的存在，当你须要猎取新的代码时，就会显得很辣手。

关于缓存：看文档

    原文作者：平平不平
    原文地址: https://segmentfault.com/a/1190000013212074
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞