还不打算去认识一下webpack?

Tony_Zby 发布于2019-08-23 12:51 / 560人阅读

摘要：前言随我来去看看为时未晚第一版较浅显的知识懂得可忽略本文方向安装起步搭建运行粗略代过对于资源的管理对于输出的管理举例介绍本地开发基础服务热更新模块热替换初步认识初步构建新建一个文件并进入更目录是命令初始一个文件表示跳过询问步骤安装

前言

随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文)

方向

安装,起步搭建运行. (粗略代过)

对于资源的管理,对于输出的管理. (举例介绍)

本地开发 (基础服务)

热更新=[模块热替换] (初步认识)

1.初步构建

mkdir webpack_demo && cd webpack_demo   // 新建一个文件 并进入更目录 `mkdir 是linux命令`
npm init -y   // 初始一个packjage.json文件  -y 表示跳过询问步骤...


//安装webpack
npm install webpack --save-dev  // 添加webpack-cli依赖到"devDependencies"
//webpack4.0+ 需要安装webpack-cli
 npm install webpack-cli --save-dev  // 添加webpack-cli依赖到"devDependencies"

//生成如下目录
├── package.json                                       
├── src                                       //源目录(输入目录)
│   ├── index.js                                    
├── dist                                         // 输出目录
│   ├── index.html

// 修改 `dist/index.html`
< !DOCTYPE html>

    
        
        webpack_demo
    
    
               //为什么是main.js下面会解释
    


//修改`src/index.js    `
 function component() {
   var element = document.createElement("div");
     element.innerHTML = "整一个盒子"
     return element;
  }

  document.body.appendChild(component());

 npx webpack (Node 8.2+ 版本提供的 npx 命令) 
node node_modules/.bin/webpack (8.2-版本)

会将我们的脚本作为入口起点，然后输出为 main.js.

打开dist/index.html  你将会看到 整一个盒子 几个字样~

2.资源管理,输出管理.基本开发起步

//生成如下目录
  ├── package.json 
+ |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目录(输入目录)
  │   ├── index.js                                    
  ├── dist                                       // 输出目录
  │   ├── index.html

先介绍一个Lodash库它是一个一致性、模块化、高性能的 JavaScript 实用工具库模块化处理非常适合值操作和检测(说白了就是webpack用了我也试试...)
lodash相关文档

npm install lodash --save //非仅在开发的时候使用的依赖就是需要打包到生产环境的包不加-dev

// src/index.js
import _ from "lodash";

function component() {
   var element = document.createElement("div");
     element.innerHTML = _.join(["lodash","webpack"],"");   //join将 array 中的所有元素转换为由""分隔的字符串 其它函数可以自己实践
     return element;
 }

打开index页面输出 loadshwebpack

//webpack.config.js
 const path = require("path");
 
 module.exports = {
      entry: "./src/index.js",   //入口
      output: {  //出口
        filename: "main.js", //打包之后脚本文件名称
        path: path.resolve(__dirname, "dist")  //路径指向执行 js 文件的绝对路径 此处为/dist
      }
 };

执行npx webpack --config webpack.config.js    (把之前dist目录下main.js删除)  新的脚本生成(其实没多大变化..)

//  配置一下package.json
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"     //添加此行命令 下次执行打包就是 npm  run  build 相当于上面的npx webpack --config webpack.config.js
  },

// 资源的配置 css 图片 js等等.. 举例 css 图片

npm install --save-dev style-loader css-loader   css的loader
npm install --save-dev file-loader  file(图片)对象的 loader

 //生成如下目录
   ├── package.json 
 + |── webpack.config.js                          //webpack配置文件                                     
   ├── src                                        //源目录(输入目录)
   │   ├── index.js   
 + │   ├── index.css 
 + │   ├── icon.jpg                                
   ├── dist                                       // 输出目录
   │   ├── index.html

//修改webpack.config.js
    const path = require("path");  //path路径模块
    module.exports = {
      entry: "./src/index.js",   //入口
      output: {   //出口
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
      },
      module: {
         rules: [
           {
             test: /.css$/,  //检测正则匹配.css结尾的文件
             use: [           //使用俩个loader
               "style-loader", 
               "css-loader"
             ]
           },
           {
             test: /.(png|svg|jpg|gif)$/,  //正则匹配.png svg jpg gif结尾的文件
             use: [    //使用file-loader
               "file-loader"
             ]
           }
         ]
       }
    };
 //修改src/index.css
    div{
        color:red;
    }

 //修改src/index.js
     import _ from "lodash";
     import "./index.css";
     import Icon from "./icon.jpg";
    
    
      function component() {
        var element = document.createElement("div");
    
        element.innerHTML = _.join(["loadsh", "webpack"], " ");
        var myIcon = new Image();
        myIcon.src = Icon;
    
        element.appendChild(myIcon);
        return element;
      }
    
      document.body.appendChild(component());

npm run build(删除之前的dist目录下main.js)  你会看红字和图片  以上就是资源管理的简短介绍

npm install --save-dev html-webpack-plugin   安装html-webpack-plugin模块 模块用到功能:
  1： 动态添加每次compile后 js css 的hash
  2:  可配置多页面 单页面 这些 
  3： 其它没涉及到
npm install clean-webpack-plugin --save-dev 清除dist文件夹(每次删除麻烦了..)配置一下

//修改目录
  ├── package.json 
  |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目录(输入目录)
 +  │   ├── app.js
 +  │   ├── print.js
  │   ├── index.css 
  │   ├── icon.jpg                                   
  ├── dist                                       // 输出目录
  │   ├── index.html

//webpack.config.js  ===============================================
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};

//修改src/index.js ===================================================
 import _ from "lodash";   //引入lodash模块
 import "./index.css";     // index.css
 import Icon from "./icon.jpg";   // 图片
 import printMe from "./print.js"    // printJS


  function component() {
    var element = document.createElement("div");  //创建一个元素

    element.innerHTML = _.join(["loadsh", "webpack"], " ");  // lodash中_.join方法
    var myIcon = new Image(); //创建一个图片
    myIcon.src = Icon;    //src赋值

    element.appendChild(myIcon);   //追加图片

    var btn = document.createElement("button");  //创建按钮
    btn.innerHTML = "Click me and check the console!";   //内容赋值
    btn.onclick = printMe;   //添加事件
    element.appendChild(btn);   //追加元素

    return element;
  }

  document.body.appendChild(component());   //追加元素到body中
  
  //修改src/print.js  ==========================================
  export default function printMe() {
      console.log("from print.js");
  }

npm run build 会发现基本webpack的配置之后 ,有点模样(意思)了  打开页面index.html正常访问

3.本地开发

npm install --save-dev webpack-dev-server     "webpack-dev-server" 为你提供了一个简单的 web 服务器，并且能够实时重新加载

 //修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist"
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     })
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};
//修改package.json
...
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --open", //start命令
    "build": "webpack"
 },
 ...

npm run start 本地起了8080端口的服务,你也可以看到自己的页面

4.热更新

//修改webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
     contentBase: "./dist",
     hot: true
  },
  plugins: [
       new CleanWebpackPlugin(["dist"]),
     new HtmlWebpackPlugin({
       title: "webpack_demo"
     }),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
  ],
  module: {
     rules: [
       {
         test: /.css$/,
         use: [
           "style-loader",
           "css-loader"
         ]
       },
       {
         test: /.(png|svg|jpg|gif)$/,
         use: [
           "file-loader"
         ]
       }
     ]
   }
};

npm run start 运行http://localhost:8080/  然后你去修改print js的console(或者添加其他代码) 会发现命令行输出updated. Recompiling... 字样 这就是简单的实现了热更新

最后

本文只是大概从几个demo来对于webpack的基础概念 入口entry 出口 output loader plugins mode(没有直面涉及)几大模块的梳理于实践,让大家对于webpack不在那么陌生!

后续文章会从更深入的角度去学习webpack! 暂定下周1 发表文章(内容详细介绍hot 实现一个简易的vue-cli等等)

demo的代码我会同步github

ps:

第二版 : webpack构建一个简易的my-vue-cli

云服务器 GPU云服务器打算什么云服务器好用还不贵数据挖掘是打算发认识

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

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

我他喵的到底要怎样才能在生产环境中用上 ES6 模块化？

摘要：因此，你还是需要各种各样杂七杂八的工具来转换你的代码噢，我可去你妈的吧，这些东西都是干嘛的我就是想用个模块化，我到底该用啥子本文正旨在列出几种可用的在生产环境中放心使用模块化的方法，希望能帮到诸位后来者这方面的中文资源实在是忒少了。原文发表在我的博客上。最近捣鼓了一下 ES6 的模块化，分享一些经验 :) Python3 已经发布了九年了，Python 社区却还在用 Python 2...

KaltZK 2019-08-20 17:47 评论0 收藏0
webpack的学习之路~~第一天

摘要：第节认识的作用学习的一原因现在的前端网页功能丰富，特别是单页应用技术流行后，的复杂度增加和需要一大堆依赖包，还需要解决，新增样式的扩展写法的编译工作。在出现后，还肩负起了优化项目的责任。其实就是获取了项目的绝对路径。第01节：认识WebPack的作用：学习的一原因：现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，...

blankyao 2019-08-22 17:03 评论0 收藏0
写给初入门/半路出家的前端er

摘要：半路出家的前端程序员应该不在少数，我也是其中之一。年，冯冯同事兼师兄看我写太费劲，跟我说对面楼在找，问我要不要学，说出来可能有点丢人，但是在那之前，我真得不知道什么是，什么是。半路出家的前端程序员应该不在少数，我也是其中之一。为何会走向前端非计算机专业的我，毕业之后，就职于一家电力行业公司，做过设备调试、部门助理、测试，也写过一段时间的QT，那三年的时间，最难过的不是工作忙不忙，...

Cc_2011 2019-08-23 17:18 评论0 收藏0
作为前端开发者，你还不知道什么是 postCss？

摘要：的定位属于预处理器吗还是属于后置处理器都不是，因为具体做的事取决于开发者使用了什么插件。这里做一个我觉得比较恰当的类比，中的相当于的中的，，等预处理器相当于，虽然不是完全合理，但是还是比较恰当。前言原谅我取这样的标题，我知道 postCss 对于大多数前端开发者来说早已经很熟悉了，但是楼主作为一个初出茅庐的前端er，还有好多的工具和技术没接触过，说来惭愧。虽然平时也喜欢使用css预...

appetizerio 2019-08-29 17:17 评论0 收藏0

发表评论

登陆后可评论

0条评论

Tony_Zby

男|高级讲师

我要关注我要私信

TA的文章

C语言：数组（及冒泡排序）

阅读 2457·2021-11-16 11:45
Facebook发布新工具，可查找Android应用程序中的安全和隐私漏洞

阅读 2425·2021-10-11 10:59
字节同事写了一篇Leetc刷题心得，高管看见之后，直接给他涨了20K，我惊呆了

阅读 2237·2021-10-08 10:05
搬瓦工：Linux CentOS/Ubuntu/Debian修改设置系统时区教程

阅读 3786·2021-09-23 11:30
嵌入式软件岗位就业指导建议！！！

阅读 2351·2021-09-07 09:58
前端菜鸟笔记 Day-5 CSS 高级

阅读 755·2019-08-30 15:55
css文本属性

阅读 758·2019-08-30 15:53
flex几种多列布局

阅读 1908·2019-08-29 17:00

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

还不打算去认识一下webpack?

会将我们的脚本作为入口起点，然后输出为 main.js.

相关文章

我他喵的到底要怎样才能在生产环境中用上 ES6 模块化？

webpack的学习之路~~第一天

写给初入门/半路出家的前端er

作为前端开发者，你还不知道什么是 postCss？

发表评论

0条评论

Tony_Zby

男|高级讲师

TA的文章

C语言：数组（及冒泡排序）

Facebook发布新工具，可查找Android应用程序中的安全和隐私漏洞

字节同事写了一篇Leetc刷题心得，高管看见之后，直接给他涨了20K，我惊呆了

搬瓦工：Linux CentOS/Ubuntu/Debian修改设置系统时区教程

嵌入式软件岗位就业指导建议！！！

前端菜鸟笔记 Day-5 CSS 高级

css文本属性

flex几种多列布局

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

还不打算去认识一下webpack?

会将我们的脚本作为入口起点，然后 输出 为 main.js.

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动

会将我们的脚本作为入口起点，然后输出为 main.js.