Webpack4.0 基本操作 小白篇

Webpack 基本操作

文章目录

  • Webpack 基本操作
    • 概述
      • 前言
      • webpack是什么呢
    • Webpack的安装
    • 项目初始化
    • 打包测试
    • 样式的处理
      • 普通CSS处理
      • sass处理
      • less处理
    • 开启 SourceMap
    • 处理图片
    • 安装 webpack-dev-server
    • JavaScript 处理
    • vue 组件处理
    • 路由 router
    • export default 和 export
      • ES6中的导入和导出
      • Node的导入和导出
    • 组件中style标签的 lang 属性 和 scope 属性
    • html-webpack-plugin 插件
    • 杂七杂八
      • 本篇源码
      • import找包的规则:
      • --save 可以简写为-S, --save-dev可以简写为-D

概述

前言

我们在开发项目时,会用到很多的静态资源,我们在浏览器,浏览网页时,网页加载的速度就会变慢,而且有很多的文件都是相互依赖的。

  • 总结
    1. 网页加载速度慢, 因为 我们要发起很多的二次请求
    2. 要处理错综复杂的依赖关系
  • 如何解决
    1. 合并、压缩、精灵图、图片的Base64编码
    2. requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

webpack是什么呢

webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具

  • 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
  • 下图:看左边许多的文件,文件与文件之间又存在关系,经过webpack打包之后,就形成了右边的样子,文件少,还无依赖。
    Webpack4.0 基本操作 小白篇_第1张图片
  • 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
  • webpack中文网

Webpack的安装

  1. 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令
  2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

项目初始化

  • 创建如下目录结构
    Webpack4.0 基本操作 小白篇_第2张图片
  • 初始化项目,会在项目的根目录下生成一个package.json文件
    npm init -y
    
  • 安装webpackwebpack-cli(webpack4.0以后需要单独安装)
    npm install webpack webpack-cli --save-dev
    
    安装完成后,你会找到node_modules\.bin\webpack
  • 查看package.json文件
    Webpack4.0 基本操作 小白篇_第3张图片
  • 编写index.js,简单写一句输出语句即可
    console.log("ok");
    

打包测试

  • 输入打包命令

    webpack ./src/index.js -o ./dist/bundle.js
    

    在webpack4.0以后,打包命令需要加-o,不然回报如下错误
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xuLakBw0-1587518095886)(images/)]

  • 成功,你会发现 dist 目录下多了一个main.js的文件
    Webpack4.0 基本操作 小白篇_第4张图片

  • index.html中引入 dist 目录下的main.js文件

    <script src="../dist/main.js">script>
    
  • 打开浏览器后,运行index.html,F12打开控制台,输出ok就行

  • 编写webpack.config.js文件

    const path = require('path');
    
    module.exports = {
        // 配置入口(要打包的文件)
        entry: path.join(__dirname, './src/index.js'),
        // 输出文件相关配置
        output: {
            // 配置出口,指定打包好的文件存放路径
            path: path.join(__dirname, './dist'),
            // 要输出的文件名
            filename: 'main.js'
        },
        mode: 'development'
    }
    
  • 直接输入webpack命令即可

  • 你或许会遇见下面的黄色警告
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waQjGWJj-1587518095893)(images/)]

    黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态
    可以看到末尾并没有生成我们所打包的main.js的信息
    黄色部分的警告的意思是,没有设置模式,有开发模式和生产模式两种,

    • webpack.config.js添加属性:mode: 'development'

样式的处理

普通CSS处理

  • 首先在CSS目录下新建一个index.css文件,写点样式
    body {
           
        background-color: green;
    }
    
  • index.js文件中,将css引入
    import './css/index.css';
    
  • 此时我们打包后,会报下面错误
    Webpack4.0 基本操作 小白篇_第5张图片

    You may need an appropriate loader to handle this file type,
    currently no loaders are configured to process this file.
    它的意思是说:没有一个合适的加载器

  • 这时我们需要安装第三方loader加载器
    • css-loader:用于处理 css 文件,使得能在 js 文件中引入使用;
    • style-loader:用于将 css 文件注入到 index.html 中的
    • webpack.config.js中,module.rules 配置属性
      rules: [
      	{
             test: /\.vue/, use: 'vue-loader'}
      ]
      
    • index.html添加如下
      <div id="app">div>
      
    • 导入index.js中导入App.vue组件
      import App from './js/App.vue';
      
    • index.js中,创建Vue实例对象
      var vm = new Vue({
             
          el: '#app',
          render: function(createElements) {
             
              return createElements(App);
          }
      });
      
    • [Vue warn]: Cannot find element: #app
      • 是因为页面还没加载完,所以找不到此元素,我们直接把

你可能感兴趣的:(Webpack,web)