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

最新推荐文章于 2024-07-05 13:31:57 发布

weixin_33704234

最新推荐文章于 2024-07-05 13:31:57 发布

阅读量257

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013212074

版权

搭建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':


可以通过命中缓存，以降低网络流量，使网站加载速度更快，
然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，
就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

关于缓存：看文档