精华内容
参与话题
问答
  • webpack

    千次阅读 多人点赞 2019-10-17 21:30:04
    webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...

    webpack

    1. webpack

    1.1 静态资源多了带来的问题

    • 网页加载速度慢, 因为 我们要发起很多的二次请求
    • 要处理错综复杂的依赖关系

    1.2 如何解决上述问题

    • 合并、压缩、精灵图、图片的Base64编码
    • 可以使用webpack解决各个包之间的复杂依赖关系

    2. webpack的使用

    2.1 webpack的安装

    • 全局安装运行npm i webpack -g这样就可以在全局使用webpack的命令了
    • 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

    官方建议我们安装在项目的目录下

    **备注:**在webpack4之后的版本,不光需要安装webpack还需要安装webpack-cli

    2.2 webpack的使用

    2.2.1 项目搭建思路

    1. 搭建项目的目录结构

    2. 使用npm init构建项目,使用package.json管理项目

    3. 安装jquery插件

    4. 不在页面中引入jquery而是在main.js中引用jquery(使用es6高阶语法),这样做可以减少请求次数

    5. 编写js脚本

    6. 浏览器不认识es6的高级语法,所以使用webpack打包js文件,将这个js文件转化成浏览器可以认识的文件.

      1. 安装webpack npm i webpack -D
      2. 安装webpack-cli npm i webpack-cli -D
      3. 执行打包命令, webpack 【需要打包的文件】 -o 【``输出的文件``】
      4. 因为webpack不是全局安装所以没有办法在命令行中直接执行webpack命令,这里可以借助npm提供的npx命令执行webpack命令 npx webpack 【需要打包的文件】 -o 【``输出的文件``】
    7. 在html中引入打包好的js文件

    npx 可以执行项目已经安装的可执行工具

    2.2.2 webpack的作用

    1. 处理了js的依赖关系,对js做了合并。
    2. 让浏览器不识别的高级语法,转换成浏览器可以识别的语法。

    2.3 webpack的配置文件webpack.config.js

    1. 默认配置的入口文件是src目录。我们在src根目录下添加index.js,就会默认打包这个index.js文件
    2. 默认出口文件在dist目录下生成main.js

    2.4 自定义配置文件

    1. 创建webpack.config.js的文件,放在项目的根目录

    2. 配置入口和出口,配置放在module.exports导出的对象里

      1. 入口entry,配置这个时候后面写的是路径,这里用到的是node提供的path的api进行路径的拼接

      2. 出口output

        path

        filename

    // webpack的配置文件
    const path = require('path');
    
    // 使用path提供的方法拼接路径
    // /src/ ,/src , index.js. /index.js
    // /src//index.js
    // /src/index.js
    
    module.exports = {
        entry: path.join(__dirname, 'src/main.js'),
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js'
        }
    }
    
    1. 之后直接运行webpack即可打包

      在node里__dirname是这个js的当前路径

    2.5 执行webpack之后发生了什么

    1. 它会去项目的根目录里找webpack.config.js配置文件,如果没找到会使用默认的配置文件,这个默认的配置文件是在webpack4之后才有的。默认的入口是src/index.js,默认的出口是dist/main.js。
    2. 回去找到配置文件配置的入口entry和出口output。
    3. 执行webpack的打包命令,将入口文件转化成出口文件

    2.6 配置多个入口

    应用场景:

    1. 业务代码和第三方代码分离。

    2. 多模块懒加载

      1. 业务场景:在单页面应用中,如果不做懒加载首页加载时,会把所有的js都加载出来,导致首页加载过慢
      2. 解决: 加载首页的只加载首页的js,用到哪个模块就加在那个模块的js

    如何配置:

    1. entry之前是单个的地址,只能对应一个文件,entry可以配置成一个对象,对象的key就打包的入口文件起的名字,value是文件对应的地址。
    2. output的filename改为**[name].js** ,这里[name]指向就是配置的key的名字。
    module.exports = {
        entry: {
            bundle: path.join(__dirname, 'src/main.js'),
            index: path.join(__dirname, 'src/index.js')
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].js'
        }
    }
    

    3. 使用webpack-dev-server插件启动页面

    每次修改之后都要重新打包,之后刷新页面,操作很繁琐,使用webpack-dev-server就可以解决这个问题,实时预览。

    3.1 如何使用

    1. 安装webpack-dev-server依赖 npm i webpack-dev-server -D

    2. 运行这个命令启动服务

      1. 通过npx运行脚本npx webpack-dev-server
      2. 配置package.json脚本
        1. 配置之后通过npm run 【配置的名字】就可以启动
      "scripts": {
        "dev": "webpack-dev-server",
      },
    

    3.2 执行这个webpack-dev-server发生了什么

    1. 启动了一个服务,这个服务默认启动在8080端口

    2. 执行webpack命令,把输出的内容放在了内存里,我们直接通过localhost:8080/【输出的文件名】就可以访问到这个文件。

      1. 为什么要放在内存里:我们文件一保存就会进行打包编译,会频繁涉及到文件的读写,内存的读写效率要比硬盘高很多,所以放在内存里。
    3. 我们一修改入口文件,就会执行打包命令,界面就会进行刷新

    3.3 实现自动打开浏览器以及热更新

    1. 通过命令行指定参数的方式实现webpack-dev-server --open --port 3000 --contentBase src --hot注意参数之间都有空格

      1. open 打开浏览器
      2. port 服务端口号
      3. contentBase 默认的界面
      4. hot 热部署,每次修改js文件只会打包修改的地方,提高效率,浏览器不刷新修改内容
    2. 使用配置文件配置devServer

    module.exports = {
        ..., // 省略了前面的内容
        devServer: {
            // --open --contentBase src --port 3000 --hot",
            open: true,
            contentBase: 'src',
            port: 3000,
            hot: true
        }
    }
    

    3.4 html的使用html-webpack-plugin

    1. 安装html-webpack-plugin
    2. 配置html-webpack-plugin
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
          template: path.join(__dirname, './src/index.html'), 
    // 指定 模板页面,将来会根据指定的页面路径,去生成内存中的 页面
          filename: 'index.html' // 指定生成的页面的名称
        })
      ],
    

    生成的文件和之前文件的区别

    生成的文件里面会自动引入打包好的js文件

    4. 解析css文件

    1. main.js中去引入写好的css,这里的引入方式和引入js是不同的import 【css文件的地址】
    2. webpack默认只能处理js文件,如果遇到其他后缀,就会去配置文件中找处理的规则,规则配置如下:
    module: { // 这个节点,用于配置 所有 第三方模块 加载器 
        rules: [ // 所有第三方模块的 匹配规则
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
          { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
          { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
        ]
      }
    
    1. 安装处理的规则

      1. css处理规则:css-loader style-loader
      2. less: less、less-loader
      3. sass: sass-loader、node-sass、sass
    2. 文件的处理顺序是从后向前进行处理

    4.1 处理css中的地址问题

    默认无法处理css文件中的url地址

    1. 安装url-loader file-loader

    2. loader传参,

      1. 配置limit
      2. 配置name=[hash:8]-[name].[ext]

    5. 处理图片数据

    1. 因为webpack不认识.jpg…结尾的资源,所以我们进行静态资源的处理
    2. 使用url-loader file-loader处理图片数据
    3. 正则/\.(jpg|png|gif|bmp)$/,url-loader依赖file-loader所以我们只写了url-loader,配置如下:
    {
         test: /\.(jpg|png|gif|bmp|svg)$/,
         use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
     }
    
    		4.  loader传参:
             			1.  配置limit 比这个配置文件小的图片会使用base64编码,比这个大的使用地址
             			2.  配置name=[hash:8]-[name].[ext] 使用地址的名字在这里配置:
                       			1.  [hash:8]生成一个唯一的hash码这个hash码是32位,这里截取前8位
                       			2.  [name]代表文件的名字
                       			3.  [ext] 文件的扩展名
    

    6. 处理字体文件

    和静态资源类似,配置相应的解析规则就可以,这里也是使用url-loader进行的解析

    {
      test: /\.(woff|woff2|eot|ttf)$/,
      use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
    }
    

    7. 翻译JS的高级语法babel

    在 webpack 中,默认只能处理 一部分 ES6 的新语法,一些更高级的ES6语法或者 ES7 语法,webpack 是处理不了的;这时候,就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的语法之后,会把结果交给 webpack 去打包到 bundle.js 中。

    1. Babel 是一个 JavaScript 编译器

    2. 我们的目的是在低版本浏览器中也可以使用高级的语法。说白了就是为了兼容低版本浏览器,使用这个插件之后,会把高版本的语法转换成低版本的语法。转换规则在配置文件中配置的

      1. 例如:presets: [’@babel/preset-env’]
    3. 使用;

      1. 安装依赖,具体安装官网有介绍npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

      2. 添加loader的配置:

        {
          test: /\.js$/,
          // 排除的部分,node_modules,1、没有必要2、node_modules特别大,打包比较慢
          exclude: /(node_modules|bower_components)/,
          // 使用数组和字符串配置,这里也可以使用对象配置,loader是js文件的处理模块,options是参数,里面参数的
          // 内容是根据不同loader有不同的内容,这里presets是指定babel-loader预置的翻译语法
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
        

    8. 使用webpack渲染vue

    8.1 使用传统方式进行运行

    1. 我们安装的vue默认导入的是运行时环境的vue,在运行时环境中不支持直接使用template渲染,推荐使用render函数渲染
    2. 我们还想通过传统的方式渲染,我们可以导入完整的vue的js,import Vue from 'vue/dist/vue'
    3. 这个导入什么包由package.json里的main属性配置的,我们不能修改node_modules里的内容。我们如果想修改vue导入时候的包的路径,可以修改webpack的配置。
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
           "vue$": "vue/dist/vue.js"
        }
      }
    

    8.2 使用webpack方式进行

    1. 在webpack中推荐使用.vue后缀的文件定义组件。

      1. template:只有一个根节点
      2. script : export default {}是一个对象
        1. 之前构造vue组件的一些属性
      1. style
        1. 写样式
        2. 通过lang可以指定语法(less、sass)
        3. 通过scoped,当
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      module: {
        rules: [
          // ... 其它规则
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        // 请确保引入这个插件!
        new VueLoaderPlugin()
      ]
    }
    
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      module: {
        rules: [
          // ... 其它规则
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        // 请确保引入这个插件!
        new VueLoaderPlugin()
      ]
    }
    
    展开全文
  • Webpack

    2019-12-23 23:21:31
    什么是Webpack? Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项...

    什么是Webpack?

    Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。(以上介绍来自百度,看着懵逼的话可以看我下边自己总结的)

    Webpack是前端的一个自动化工具,有了它可以大大提高我们写项目的效率,比如你可以对css,js文件进行自动压缩,把sass代码自动解析成对应的css文件,让你的代码和样式实时的显示在浏览器上等等,当然,我们使用webpack的最终目的还是为了项目完成后进行打包,webpack并不强制你使用AMD或者CMD这之中的某一种方案,而是通过兼容所有模块化方案让你可以无痛接入项目,有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,webpack会帮你处理好。

    Webpack的核心概念

    在使用webpack之前,我们首先要明白它的核心概念

    1. entry 入口

      webpack是根据入口文件开始打包的,入口文件也就是最先使用依赖的文件

    2. output 输出

      文件打包好之后输出到哪个文件夹,打包好的文件名都在这里设置

    3. loader 加载器

      因为webpack本身只可以去压缩js文件,所以当我们需要去处理其他非js文件时,就需要安装对应的loader

    4. plugins 插件

      插件可以使webpack执行范围更广的任务,比如:
      1. 打包优化
      2. 压缩
      3. 重新定义环境中的变量
      4. 使生成的js自动引入html页面

      使用一个插件 只需要 require 它。 然后给它添加到 plugins 数组中。 多数插件可以通过 options 来定义。
      注意:如果你在一个配置文件中多次的使用同一个插件时,这时候需要通过new 操作符来重建一个新的实例。

    如何使用webpack对vue现有项目进行打包

    1. 在vue.config.js中
    module.exports={
    		publicPath:'./',  //设置相对路径
    		assetsDir:'./',	//设置相对路径
    
    		devServer:{
    
    		}
    	}
    
    1. 在路由router里的index.js里
    const router=new VueRouter({
    		routes,
    		mode:'hash' //hash模式
    	})
    
    1. package.json里添加
    "scripts":{
    		"serve":"vue-cli-service serve", //启动的方法 npm run serve
    		"build":"vue-cli-service build" //打包的方法 npm run build
    	}
    
    展开全文
  • yarn add webpack webpack-cli --dev //简写 yarn add webpack webpack-cli -D –dev 指安装到devDependencies:开发时的依赖包 –save dependencies:运行程序时的依赖包 方式二:NPM命令安装: 或者: npm install...

    方式一:yarn命令安装:

    yarn global add webpack webpack-cli
    yarn add webpack webpack-cli --dev //简写 yarn add webpack webpack-cli -D
    –dev 指安装到devDependencies:开发时的依赖包
    –save dependencies:运行程序时的依赖包

    方式二:NPM命令安装:

    或者: npm install webpack webpack-cli -g
    npm install webpack webpack-cli --save-dev

    或者可以指定webpack版本安装:
    npm i -D webpack@3
    npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到
    注意,在命令终端使用npm i安装依赖关系时,如果带后缀 -D(或–save-dev) 安装的包会记录在"devDependencies"下;如果使用 --save后缀安装的包会记录在"dependencies"下。

    展开全文
  • 更好的维护代码,把 webpack.config.js 拆分成三个部分: 公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即 webpack.common.js 开发环境配置:把开发环境需要的相关...

    更好的维护代码,把 webpack.config.js 拆分成三个部分:
    公 共 配 置 : 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 , 即
    webpack.common.js
    开发环境配置:把开发环境需要的相关配置放置到 webpack.dev.js
    生产环境配置:把生产环境需要的相关配置放置到 webpack.prod.js

    安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D

    生产文件环境webpack.pro.js

    const webpack = require('webpack'); 
    const path = require('path'); 
    const merge = require('webpack-merge');
    const DIST_PATH = path.resolve(__dirname, './dist/'); 
    const commonConfig = require('./webpack.common.js'); 
    module.exports = merge(commonConfig, { 
        // mode: 'production',
        mode:'development', 
        output: { 
            path: DIST_PATH, // 创建的bundle生成到哪里
            filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
         }, 
        // 设置Webpack的mode模式 
        plugins: [ ]
    })
    
    

    开发文件环境webpack.dev.js

    const webpack = require('webpack'); 
    const path = require('path'); 
    const merge = require('webpack-merge');
    const commonConfig = require('./webpack.common.js'); 
    const DIST_PATH = path.resolve(__dirname, './dist/'); 
    
    module.exports = merge(commonConfig, { 
        mode: 'development', 
        // 设置Webpack的mode模式 
        // 开发环境下需要的相关插件配置 
        output: { 
            path: DIST_PATH, // 创建的bundle生成到哪里
            filename: '[name].js', // 创建的bundle的名称
         }, 
         
        plugins: [ ], 
         // 开发服务器 
         devServer: { 
            hot: true, // 热更新,无需手动刷新 
            contentBase: DIST_PATH,  //热启动文件所指向的文件路径
            host: '0.0.0.0', // host地址 
            port: 8080, // 服务器端口 
            historyApiFallback: true, // 该选项的作用所用404都连接到index.html 
            proxy: { 
            "/api": "http://localhost:3000" 
            // 代理到后端的服务地址,会拦截所有以api开头的请求地址
             } ,
            useLocalIp: true 
            // open:true,
            // noInfo:true
          }
    })
    
    

    webpack.common.js

    var webpack = require('webpack');
    var path = require('path');
    var glob = require("glob");
    
    var DIST_PATH = path.resolve(__dirname, './dist');
    
    //入口文件
    var SRC_PATH = path.resolve(__dirname, './src');
    var newEntries = {};
    // index:'./src/index.js',
    // main:'./src/main.js'
    
    // var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
    var files = glob.sync(SRC_PATH + '/*.js'); //方式二
    files.forEach(function (file, index) {
      // var substr =  file.split('/').pop().split('.')[0];
      var substr = file.match(/src\/(\S*)\.js/)[1];
      newEntries[substr] = file;
      // [\s]---表示,只要出现空白就匹配;
      // [\S]---表示,非空白就匹配;
    
    })
    
    // 声明/dist的路径 为成绝对路径
    module.exports = {
      // 入口JS路径 
      // 指示Webpack应该使用哪个模块,来作为构建其内部依赖图的开始 
      // entry: path.resolve(__dirname,'./src/index.js'), 
      // 支持单文件,多文件打包
      // entry: './src/index.js',   //方式一
      //  entry: ['./src/index.js','./src/main.js'], //方法二
      // entry: {
      //     index:'./src/index.js',
      //     main:'./src/main.js'
      //  },
      entry: newEntries,
    
      // 编译输出的JS入路径 
      // 告诉Webpack在哪里输出它所创建的bundle,以及如何命名这些文件 
      output: {
        path: DIST_PATH, // 创建的bundle生成到哪里
        // filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
        filename: '[name].js', // 创建的bundle的名称
      },
      // 模块解析 
      module: {
    
      },
      // 插件
      plugins: [
    
      ],
    
    }
    

    启动

    "scripts": { "build": "webpack --config ./build/webpack.prod.js --mode production", "dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open", "test": "echo \"Error: no test specified\" && exit 1" },
    
    展开全文
  • webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } var webpack = require('webpack'); var path = require('path'); var glob = require(...
  • WebPack

    千次阅读 2019-07-11 15:10:25
    WebPack 入门
  • 在通过vs code 运行webpack进行打包时,报错webpack : 无法加载文件 D:\nodejs\node_global\...
  • 重点插件plugin介绍 插件与模块解析的功能不一样, 模块解析是为了导入非es5格式js或其它资源类型文件, 定制了一些loader。 插件是对最后的打包文件进行处理的,也可以理解loader是为打包前做准备,plugin是打包再...
  • vue入门——通过webpack构建vue项目

    千次阅读 2019-01-25 20:04:04
    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue. 在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是...
  • Webpack学习笔记 webpack介绍和安装

    万次阅读 2019-09-05 19:53:15
    * Webpack是一个模块打包器(bundler)。 * 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理 * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源 官方文档:...
  • webpack和gulp的区别

    万次阅读 2019-08-07 11:08:36
    webpack和gulp的区别是什么? 这是一个前端面试经常会有的面试题,当然也是很多人的疑问,那下面就简单说一下吧! Gulp: gulp 致力于 自动化和优化 你的工作流,它是一个自动化你开发工作中 痛苦又耗时任务 的工具...
  • vue使用webpack创建项目的命令

    万次阅读 2020-05-12 14:31:37
    vue init webpack my_project
  • webpack4 兼容老项目中的 require.js

    万次阅读 2019-08-05 20:57:33
    项目使用 require.js 进行模块化编程,并...require.js 使用 AMD 语法,webpack同样支持AMD语法,迁移成本较低,因此将 gulp 迁移至 webpack 4.38.0。 开始 先看一下requirejs.config requirejs.config({ baseUrl:...
  • @ ./node_modules/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin/dist/uglify/Runner.js @ ./node_modules/_uglifyjs-webpack-plugin@1.3.0@uglifyjs-webpack-plugin/dist/index.js @ ./node_...
  • 尝试着学习webpack,但总是说webpack不是内部命令,我是这样做的(事先已经安好了node和npm): 1.先在命令行执行 npm config set prefix “d:\node\node_global”设置全局路径 2.再执行 npm install webpack -g 在...
  • vue cli3配置image-webpack-loader

    万次阅读 2019-12-04 12:08:04
    vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => { config.plugins.delete('prefetch') config.plugin('...
  • ### 在终端执行webpack调用webpack.config.js 时,报错,求大佬解决 ### 这是我 webpack.config.js 的代码 ``` JavaScript const path = require('path') module.exports = { entry: './src/main.js', ...

空空如也

1 2 3 4 5 ... 20
收藏数 107,081
精华内容 42,832
热门标签
关键字:

webpack