精华内容
下载资源
问答
  • 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
    	}
    
    展开全文
  • WebPack

    千次阅读 2019-07-11 15:10:25
    WebPack 入门
    
    

    一、webpack 常用命令 

    • 查看webpack版本信息:npm info webpack versions

    • 全局安装:npm install webpack webpack-cli -g
    • 全局安装指定版本:npm install webpack@4.16.5 webpack-cli -g
    • 卸载全局安装:npm uninstall webpack webpack-cli -g
    • 查看版本:webpack -v (node.js会在全局的模块目录中去找这个命令,没有安装会找不到这个命令的)

    • 项目内安装:npm install webpack webpack-cli --save-dev(--save-dev可以等价为-D
    • 查看项目内webpack版本:npx webpack -v
    • npm install webpack --save
    • 使用项目webpack打包js文件:npx webpack Xxx.js
    • 使用全局的webpack打包js文件:webpack Xxx.js
    • node -v
    • npm -v
    •  初始化npm:npm init -y
    • 安装项目依赖包:npm install

    注:webpack-cli 能让我们在控制台运行 webpack 命令的,但是按照webpack这个的时候webpack-cli回跟着安装的不用显示的安装


    二、 webpack 配置文件

     index.js

    var Header = require('./header.js');
    var Sidebar = require('./sidebar.js');
    var Content = require('./content.js');
    
    new Header();
    new Sidebar();
    new Content();

     header.js

    function Header() {
    	var dom = document.getElementById('root');
    	var header = document.createElement('div');
    	header.innerText = 'header';
    	dom.append(header);
    }
    
    module.exports = Header;

     content.js

    function Content() {
    	var dom = document.getElementById('root');
    	var content = document.createElement('div');
    	content.innerText = 'content';
    	dom.append(content);
    }
    
    module.exports = Content;

     sidebar.js

    function Sidebar() {
    	var dom = document.getElementById('root');
    	var sidebar = document.createElement('div');
    	sidebar.innerText = 'sidebar';
    	dom.append(sidebar);
    }
    
    module.exports = Sidebar;

     index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>这是最原始的网页开发</title>
    </head>
    <body>
    	<p>这是我们的网页内容</p>
    	<div id='root'></div>
    	<script src='./bundle.js'></script>
    </body>
    </html>

    当我们使用  npx webpack Xxx.js 执行打包命令的时候,似乎没有看见配置文件的影子,其实这个时候使用的是webpack的默认配置

    默认的配置文件:webpack.config.js

    const path = require('path');
    // 配置
    module.exports = {
    	// 1. 项目重那个文件开始打包
    	entry: './src/index.js',
    	// 2. 打包文件放到哪里
    	output: {
    		// 3. 打包好的文件的名字
    		filename: 'bundle.js',
    		// 4. 打包出的文件放在哪个文件夹下 path要是绝对路径
    		// __dirname就是webpack.config.js的绝对路径,和dist结合
            // 不写效果一样,默认就是
    		path: path.resolve(__dirname, 'dist')
    		// 绝对路径
    		// path: path.resolve('F:/Test/GitTest2/')
    	}
    }

     手动指定配置文件: npx webpack --config Xxx.js

    使用 npm scripts 简化配置

     在 package.json 里面有一个scripts属性,这个数据是配置执行脚本的

    {
      "name": "lesson",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "webpack": "^4.25.1"
      }
    }
    

    scripts 配置的 webpack 首先会在当前项目中找 webpack,然后才去全局找所以 webpack 前面不需要加 npx, 我配置了webpack.config.js后面就不需要打包的js入口文件了

    现在我们执行打包命名:npm run bundle (npx webpack Xxx.js)

    • npm run bundle -> webpack

    打包输出类容 

    PS F:\Procedure\Html\webpack\01-04\lesson> npx webpack
    Hash: 1b24ce275a9479386bf2
    Version: webpack 4.25.1
    Time: 114ms
    Built at: 2019-07-11 7:53:18 PM
        Asset      Size  Chunks             Chunk Names
    bundle.js  1.36 KiB       0  [emitted]  main
    Entrypoint main = bundle.js
    [0] ./src/index.js 159 bytes {0} [built]
    [1] ./src/header.js 187 bytes {0} [built]
    [2] ./src/sidebar.js 193 bytes {0} [built]
    [3] ./src/content.js 193 bytes {0} [built]

     Chunk Names 输出main,就是entry里面的

    const path = require('path');
    module.exports = {
    	entry:{
    		main:'./src/index.js',
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set
    'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
    const path = require('path');
    module.exports = {
    	// 不配置这个会有警告,但是它会给我们设置成这个
    	// production 打包出的文件会被压缩
    	// development 不压缩
    	mode:'production',
    	entry:{
    		main:'./src/index.js',
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }

     


    三、 使用WebPack打包其他文件

    file-loader

    打包图片

    webpack.config.js

    const path = require('path');
    
    module.exports = {
    	mode: 'development',
    	entry: {
    		main: './src/index.js'
    	},
    	// webpack默认知道如何处理js模块,但是不知道jpg这种文件怎么打包
    	// 我们这里需要配置
    	module: {
    		// 可以定义多个规则
    		rules: [{
    			// 正则匹配 jpg png gif文件
    			test: /\.(jpg|png|gif)$/,
    			use: {
    				// 定义一个loader 需要手动安装 file-loader (npm install file-loader -D)
    				loader: 'file-loader',
    				// 配置参数
    				options:{
    					// 打包的图片和原图片一模一样(名字后缀)
    					// placeholder 占位符  https://webpack.js.org/loaders/file-loader/
    					name:'[name].[ext]',
    					// 可以指定图片打包的位置(不然在dist目录里面)
    					outputPath:'images/'
    				}
    			} 
    		}]
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }

     index.js

    import avatar from './avatar.jpg';
    console.log(avatar);
    
    var img = new Image();
    img.src = avatar;
    
    var root = document.getElementById('root');
    root.append(img);

    index.html 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<div id='root'></div>
    	<script src='./bundle.js'></script>
    </body>
    </html>
    • npm install  file-loader  -D 
    •  npx webpack

    url-loader

    当一个图片文件大于我们配置的值的时候,url-loader 和 file-loader 的效果是一模一样的

    如果图片小于我们设置的值, url-loader 不会打包图片,他会把图片转成base64

    const path = require('path');
    
    module.exports = {
    	mode: 'development',
    	entry: {
    		main: './src/index.js'
    	},
    	module: {
    		rules: [{
    			test: /\.(jpg|png|gif)$/,
    			use: {
    				// 图片转换成 base64
    				// 适合小图片
    				loader: 'url-loader',
    				options: {
    					// name: '[name]_[hash].[ext]',
    					outputPath: 'images/',
    					// 设置图片大小,是转base64还是打包到文件
    					// 小于这个值都会转base64,当图片大于这个值这个时候url-loader和file-loader是一样的
    					// kb
    					limit: 1024000
    				}
    			} 
    		}]
    	},
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    }
    {
      "name": "lesson",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "bundle": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "file-loader": "^2.0.0",
        "url-loader": "^2.0.1",
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "webpack": "^4.25.1"
      }
    }
    

     

    • npm install --save-dev url-loader  

    或者

    • npm install  url-loader  -D

     

    展开全文
  • "scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" }
  • webpack安装包

    2018-11-24 20:36:23
    webpack安装包
  • 01.webpack.BannerPlugin //加注释 > 02.terser-webpack-plugin //代码缩小,压缩 > 03.html-webpack-plugin 生成html页 > 04.extract-text-webpack-plugin,mini-css-extract-plugin //提取抽离css &...
  • Webpack:Webpack研究-源码

    2021-05-13 03:26:13
    Webpack 环境构建 Webpack Study 新建项目 npm init 安装webpack npm install -g webpack npm install --save-dev webpack npm install --save-dev webpack-cli 安装webpack本地服务器 npm install --save-dev ...
  • 进入Webpackwebpack原始解析系列
  • webpack-demo learn webpack #webpack创建项目 1、mkdir webpack-demo && cd webpack-demo 2、npm init -y 3、npm install webpack webpack-cli --save-dev 4、本地安装依赖npm install --save lodash 5、执行npx ...
  • 基本Webpack Estructura Webpack Webpack入门 Este es el proyecto原始对等应用程序webpack 注意: 节点重构 npm install Y para construir el build,recuerden npm run build
  • webpack4与webpack3的区别 ...1、当我们安装了webpack模块后,就会在node_modules/.bin目录下生成一个webpackwebpack.cmd,webpack是linux下的命令脚本,webpack.cmd是windows下命令脚本,webpack.cmd可以在wi
  • webpack_demo 基于 webpack3 的脚手架
  • webpack-multiple webpack5 多页面脚手架
  • webpack-dev-server-waitpage Webpack Webpack进度等待页面 不用等待webpack完成编译,而可以看到一个不错的进度等待页面。 安装 npm npm install -D webpack-dev-server-waitpage 纱 yarn add -D webpack-dev-...
  • webpack CLI webpack的官方CLI 目录 关于 webpack CLI提供了一组灵活的命令,供开发人员在设置自定义webpack项目时提高速度。 从webpack v4开始,webpack不再需要配置文件,但是开发人员经常希望根据其用例和需求...
  • #webpack教程 ##安装webpack npm install webpack -g webpack --help ##初始化项目 创建项目 cd webpack mkdir webpack-tutorial cd webpack-tutorial npm init -y touch index.html 编辑index.html内容 <!...
  • :male_sign:‍:male_sign: Webpack游乐场 此存储库包含各种示例,这些示例演示了不同的Webpack配置以及对其输出的评估。 :flag_in_hole: 演示版 Webpack的依赖功能 使用DLL拆分捆绑包以缩短构建时间 使用esbuild...
  • Webpack 4演示·Legato :musical_notes: 演示项目开始使用并进行实验 开始 恢复依赖关系并启动开发服务器: yarn && yarn dev 在主机上检查浏览器控制台 产品特点 entry / output自定义配置。 块分割( app | ...
  • webpack使用介绍

    2018-04-04 11:14:54
    webpack使用介绍 webpack使用介绍 webpack使用介绍 webpack使用介绍
  • webpack 思维导图

    2018-07-19 15:15:17
    webpack 思维导图 webpack 思维导图 webpack 思维导图
  • webpack 资料整理 (持续更新) 更新时间 2016-06-18 入门 高阶 - 评论很精彩 webpack 使用优化 【译】基于 Webpack 和 ES6 打造 JavaScript 类库 webpack使用优化(基本篇) webpack使用优化(react篇) React移动...
  • Webpack配置 Bamdad Sabbagh的webpack配置 供应商 配置。 npm 软件包。 安装 yarn add --dev @bamdadsabbagh/webpack-config 用法 { " start " : " cross-env NODE_ENV=development webpack-dev-server --config ...
  • 未使用的文件webpack插件 在webpack的上下文中显示所有非由webpack编译的文件 使用npm安装: npm i --save-dev unused-files-webpack-plugin 用纱安装: yarn add --dev unused-files-webpack-plugin 用法 ...
  • webpack4版本也出了很久了 之前弄过一段时间的升级 后面因为种种原因搁浅了 今天有硬着头皮升级了一波 yeah 还好升级成功了 先贴一波原先webpack3的github配置 ps(我只是一个菜鸡= = webpack的配置很辣鸡 )废话少...
  • Webpack配置 可共享的Webpack配置 介绍 我的前端项目的个人共享Webpack配置。 您可以使用自己的配置添加和/或覆盖默认设置。 特征 加载JavaScript,TypeScript,CSS,Sass,字体和图像文件 开发构建的优化默认值 ...
  • 前端工程化-ESLint+webpack

    万次阅读 2020-08-14 18:52:40
    webpack

    在这里插入图片描述

    简介
    在上篇文章介绍了如何gulp + ESLint ,所以呢在本篇文章中主要介绍ESLint+webpack
    
    ESLint+webpack

    1、首先安装eslint 和eslint-loader
    需要注意的loader加载顺序是从后往前的,所以说eslint-loader需要写在babel-loader后面,如下

      rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: 'babel-loader'
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: 'eslint-loader',
                    enforce: "pre"
                },
    
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
          ]
    
    ESlint配置
    module.exports = {
        env: {
            browser: true,
            es2020: true
        },
        extends: [
            standard,
        ],
        parserOptions: {
            ecmaVersion: 11
        },
        rules: {
             "react/jsx-uses-react": 2,
             "react/jsx-uses-vars": 2
        },
        plugins: [
             "react"
        ]
    };
    
    另外一种ESLint配置方式 这种方式更常用
    module.exports = {
        env: {
            browser: true,
            es2020: true
        },
        extends: [
            standard,
            "plugin:react/recommended"
        ],
        parserOptions: {
            ecmaVersion: 11
        },
        rules: {
        },
        plugins: [
        ]
    };
    

    谢谢观看,如有不足敬请指教

    展开全文
  • 主要介绍了webpack3升级到webpack4遇到问题总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • webpack-starter starter 使用 webpack 和 NPM 作为构建工具( ) webpack 设置基于: ://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html & 快速开始 要在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 265,020
精华内容 106,008
关键字:

webpack