还不打算去认识一下webpack?

头像
wlove
    阅读 8 分钟
    50

    前言

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

    方向

    1. 安装,起步搭建运行. (粗略代过)
    2. 对于资源的管理,对于输出的管理. (举例介绍)
    3. 本地开发 (基础服务)
    4. 热更新=[模块热替换] (初步认识)

    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>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack_demo</title>
    </head>
    <body>
            <script src="main.js"></script>   //为什么是main.js下面会解释
    </body>
</html>

//修改`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
    javascriptwebpack-dev-serverwebpack
    wlove
    6.9k 声望1.8k 粉丝

    wx:wywin2023

    « 上一篇
    VUE使用中踩过的坑
    下一篇 »
    还在写冗长的 if else判断在你的代码中吗?

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    2023 end. 2024 start------------>

    wlove阅读 734

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新