webpack学习之一,基本使用和管理资源

学习是在webpack中文网,仅此记录,以供后期复习;
(https://doc.webpack-china.org/guides/getting-started/#-)
写在前面:

我认为学习之前应该了解的webpack4大基本模块:
1.入口
2.出口
3.loader
4.插件

一.基本使用

按照官网的步骤建立项目,记录如下:

1.项目目录

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

2.index.js

import _ from 'lodash';

function component(){
    var element = document.createElement('div');
    element.innerHTML = _.join(['你好','申玉超'],'');
    return element;
}

document.body.appendChild(component());

3.dist/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Asset Management</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
    <!-- <script type="text/javascript" src="./src/index.js"></script> -->
    <!-- bundle.js是打包之后的文件 -->
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

4.webpack.config.js(重点)

// path 模块应该是在安装webpack的时候自带的
const path = require('path');

module.exports = {
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

5.package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      // 运行webpack编译的脚本,不知为何,我的npx不能识别,node是8.9+的,所以只好跳过这个步骤,直接使用npm run build
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "dependencies": {
    "lodash": "^4.17.5"
  }
}

6.运行npm run build打包

7.打开dist/index.html浏览,不要打开src/index.html

二.管理资源(即加载各种资源文件到项目中)

加载各种资源导向项目中,需要使用很多loader

1.加载css

(1)安装loader

npm install --save-dev style-loader css-loader

(2)配置webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }
}

(3)使用

src/index.js

import _ from 'lodash';
import './style.css';       // 应该使用相对路径,否则不能找到模块

function component(){
    var element = document.createElement('div');
    element.innerHTML = _.join(['你好','申玉超'],'');
    return element;
}

document.body.appendChild(component());

src/style.css

body{
    color: red;
    font-size: 70px;
}

(4)运行npm run build打包

2.其他的加载图片,字体,数据都可以在官网上查找到,步骤类似于上面,不多赘述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习webpack是为了掌握前端代码打包工具的使用。随着前端工程化的发展,webpack已经成为了前端开发中最常用的打包工具之一。学习webpack可以帮助我们对项目的模块化管理、代码压缩与优化、资源加载等方面进行更加灵活和高效的处理。 这篇文章主要介绍了webpack的基础知识和使用方法。首先,它解释了webpack基本概念,如入口和出口文件、loader和plugin等。然后,它详细介绍了如何配置webpack的各个参数和插件,包括如何使用Babel处理ES6语法,如何使用Less或Sass处理CSS,如何使用图片压缩插件等。 接着,文章讲解了webpack的打包原理和优化技巧。它介绍了webpack的模块化加载机制,以及如何使用Code Splitting和Dynamic Import等功能来提高页面加载速度。同时,它还提到了如何使用webpack进行代码分割和缓存优化,以及如何使用Tree Shaking和代码压缩插件来减小项目的体积。 最后,文章介绍了webpack的常见问题和解决方法。它列举了一些常见的错误和警告信息,并提供了相应的解决方案。此外,它还提供了一些常用的webpack插件和工具的推荐,帮助我们更好地进行前端开发。 总的来说,这篇文章提供了一个很好的入门教程,可以帮助我们快速掌握webpack基本概念和使用方法。但是,要想在实际项目中灵活应用webpack,还需要深入学习官方文档和相关资料,并结合实际项目进行实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值