webpack 使用本地loader_webpack4 image-webpack-loader - CSDN
精华内容
参与话题
  • 加载调试本地loader

    千次阅读 2018-01-29 14:57:24
    在开发loader的过程中,为了测试编写的loader能否正常工作,需要将它配置到webpack中,才可能调用该loader,为此,需要先将编写的loader发布到npm仓库,再安装到本地项目中使用,但这种方法会很麻烦,解决以上问题的...

    在开发loader的过程中,为了测试编写的loader能否正常工作,需要将它配置到webpack中,才可能调用该loader,为此,需要先将编写的loader发布到npm仓库,再安装到本地项目中使用,但这种方法会很麻烦,解决以上问题的便捷方法有如下两种:

    npm link 专门用于开发和调试本地的npm 模块,能做到在不发布模块的情况下,将本地的一个正在开发的模块的源码链接到项目的node_modules目录下,让项目可以直接使用本地的npm模块,由于是通过软链接的方式实现的,编辑了本地的npm模块的代码,所以在项目中也能使用到编辑后的代码。
    完成nom link的步骤如下:

    • 确保正在开发的本地npm模块的package.json已经正确配置好;

    • 在本地的npm模块根目录下执行npm link,将本地模块注册到全局;

    • 在项目根目录下执行npm link loader-name,将第二步注册到全局的本地npm模块链接到项目的node_modules下,其中的loader-name是指在第一步的package.json文件中配置的模块名称

    链接好loader到项目后我们就可以像使用一个真正的npm模块一样使用本地的loader了

    ResolvelLoader

    ResolvelLoader用于配置webpack如何寻找loader,它在默认情况下只会去node_modules
    目录下寻找,为了让webpack加载放在本地项目中的loader,需要修改resolveloader.modules。
    假如本地项目的loader在项目目录的./loaders/loader-name下,则需要如下配置:

    module.exports = {
      resolveLoader: {
       // 去哪些项目下寻找Loader,有先后顺序之分
       modules: ['node_modules', './loaders/'],
       }
    }

    加上以上配置后,webpack会先去node_modules项目下寻找loader,如果找不到,则再去./loaders/目录下寻找。

    展开全文
  • Webpack4 配置 Loader

    2019-07-17 10:31:11
    1.Module ...rules 是用来定义多个规则,这些规则用来匹配对应的模块,然后给对应的模块应用指定的loader,rules 接收的是一个数组,数组存放的是 rule 对象; rule 对象常用的属性:test, use, i...

    1.Module

    module 配置如何处理模块, 它的值是一个对象,常用的值有 noParse 和 rules 。其中 noParse 是用来指定哪些资源不需要解析,提高编译性能;rules 是用来定义多个规则,这些规则用来匹配对应的模块,然后给对应的模块应用指定的loader,rules 接收的是一个数组,数组存放的是 rule 对象;

    rule 对象常用的属性:test, use, include, exclude, loader, loaders, options, enforce …

    简单的使用案例:

    const path = require('path');
    module.exports = {
      entry: './src/main.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
      },
      // 1.Webpack 的modules模块  
      module: {
        // 2.指定哪些资源不需要解析,提高编译性能
       	noParse: () => {
          return /jquery|chartjs/.test(content);  
        },
        // 3.定义多个规则来匹配对应的模块,然后给对应的模块应用指定的loader    
        rules: [
        	{
                // 4.匹配对应的文件
                test: '/\.js$/',
                // 5.use是应用指定的loader,别名是 loaders
                use: [
                    
                ]
                //....
                //....
            }
        ]
        
      }  
    };
    

    2.配置Loader

    rules 配置模块的读取和解析规则,通常用来配置 Loader。其类型是一个数组,数组里每一项 Rule 都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式:

    1. 条件匹配:通过 testincludeexclude 三个配置项来命中 Loader 要应用规则的文件。
    2. 应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader,同时还可以分别给 Loader 传入参数。
    3. 重置顺序:一组 Loader 的执行顺序默认是从右到左执行,通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后。
    const path = require('path');
    module.exports = {
      entry: './src/main.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
      },
      // 1.Webpack 的modules模块  
      module: {
        // 2.定义多个规则来匹配对应的模块,然后给对应的模块应用指定的loader    
        rules: [
        	{
                // 3.正则匹配对应的文件
                test: '/\.css$/',
                // 4.应用指定的loader,下面使用了两个loader,先执行css-loader
                use: [
                   'style-loader', 
        		   'css-loader'
                ]
                //....
                //....
            }
        ]
        
      }  
    };
    

    use: [‘style-loader’, ‘css-loader’] 的全写是 use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ } ]

    3.配置css Loader

    新建一个项目

    |-- package.json
    |-- src
    |   |       `-- common.js
    |   |       `-- index.html
    |   |       `-- main.css
    |           `-- main.js
    `-- webpack.config.js
    

    package.json

    {
      "name": "testcssloader",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      },
      "author": "liujun",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^3.0.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.35.3",
        "webpack-cli": "^3.3.6"
      }
    }
    

    1.scripts 属性里面编写了3个脚本:其中 dev 对应的脚本是 构建测试版;其中 build对应的脚本是 构建发布版
    2.使用的开发依赖有:style-loader css-loader webpack webpack-cli

    webpack.config.js

    const path = require('path');
    module.exports = {
      entry: './src/main.js',
      output: {
        // 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )
        filename: 'bundle.js',
        // 2. 指定输出文件存放的目录(默认是dist目录)
        path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
      },
      module: {
        rules: [
          {
            test: /\.css$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串,而是一个正则
            use: ['style-loader', 'css-loader'],
          }
        ]
      }
    };
    

    use接收一个数组数组中可以存放字符串和对象,并且use的别名是 loaders。

    例如:

    use: ['style-loader', 'css-loader']  
    	等于 
    use: [{ loader:'style-loader',options:{} }, 'css-loader']
    	等于 
    use: [ { loader:'style-loader',options:{} }, {loader:'css-loader', options: {} } ]
    
    use: ['style-loader', 'css-loader']  
     	等于
    loaders: ['style-loader', 'css-loader']
     	等于
    loaders: ['style-loader', { loader:'css-loader', options: {} }]
    

    main.css

    body {
      background-color: pink;
    }
    

    main.js

    // 1.通过 CommonJS 规范导入 showHelloWorld 函数
    const showHelloWorld = require('./common.js');
    // 2.执行 showHelloWorld 函数
    showHelloWorld('Webpack的安装和使用');
    // 3.通过 CommonJS 规范导入 CSS 模块
    require('./main.css');
    

    index.html

    <html>
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <div id="app"></div>
    <!--导入 Webpack 输出的 JavaScript 文件-->
    <script src="../dist/bundle.js"></script>
    </body>
    </html>
    

    本地安装 webpack 和 用到的loader

    npm install webpack@4.35.3  --save-dev
    npm install webpack-cli@3.3.6  --save-dev
    npm install style-loader@0.23.1  --save-dev
    npm install css-loader@3.0.0  --save-dev
    

    在项目的根目录,执行脚本构建项目

    npm run dev

    打包后输出的结果

    |-- dist
    |   |-- bundle.js
    |-- node_modules
    |-- package-lock.json
    |-- package.json
    |-- src
    |   |-- common.js
    |   |-- index.html
    |   |-- main.css
    |   `-- main.js
    `-- webpack.config.js
    
    

    打包之后的 bundle.js 文件的部分内容:

     (function(modules) { // webpackBootstrap
     	// The module cache
     	var installedModules = {};
    
     	// The require function
     	function __webpack_require__(moduleId) {
     		// Execute the module function
     		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     		// Flag the module as loaded
     		module.l = true;
     		// Return the exports of the module
     		return module.exports;
     	}
     	// Load entry module and return exports
     	return __webpack_require__(__webpack_require__.s = "./src/main.js");
     })
    ({
      // 加载main.css样式 模块
      "./node_modules/css-loader/dist/cjs.js!./src/main.css":(function(module, exports, __webpack_require__) {
    
          eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"body {\\r\\n  background-color: pink;\\r\\n}\", \"\"]);\n\n\n//# sourceURL=webpack:///./src/main.css?./node_modules/css-loader/dist/cjs.js");
    
       }),  
    
      "./node_modules/css-loader/dist/runtime/api.js":(function(module, exports, __webpack_require__) {
        ......
      }),
    
      "./node_modules/style-loader/lib/addStyles.js":(function(module, exports, __webpack_require__) {
        .....
      }),
          
      // style-loader 添加样式
      "./node_modules/style-loader/lib/urls.js":(function(module, exports) {
        ........
     }),
    
      // 2.    
      "./src/common.js":(function(module, exports) {
    	.....
      }),
          
      // 3.css-loader 加载样式
      "./src/main.css":(function(module, exports, __webpack_require__) {
    	.....
     }),
    
      // 1.加载的入口文件    
      "./src/main.js":(function(module, exports, __webpack_require__) {
    
        eval("// 1.通过 CommonJS 规范导入 showHelloWorld 函数\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.执行 showHelloWorld 函数\r\nshowHelloWorld('Webpack的安装和使用');\r\n// 3.通过 CommonJS 规范导入 CSS 模块\r\n__webpack_require__(/*! ./main.css */ \"./src/main.css\");\n\n//# sourceURL=webpack:///./src/main.js?");
    
      })
    
    });
    

    index.html

    <html><head>
      <meta charset="UTF-8">
    <!-- Webpack 中 style-loade r插入的 style 样式-->    
    <style type="text/css">body {
      background-color: pink;
    }</style></head>
    <body>
    <div id="app"></div>
    <!--导入 Webpack 输出的 JavaScript 文件-->
    <script src="../dist/bundle.js"></script>
    
    </body></html>
    

    总结:

    Loader 可以看作是文件转换功能的翻译员,配置里的 module.rules 数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

    如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件,再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 在配置 Loader 时需要注意的是:

    • use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;

    源码下载

    4.配置css Loader参数

    css Loader Options 可以接收的参数:

    Name Type Default Description
    url {Boolean\|Function} true Enable/Disableurl() handling
    import {Boolean\|Function} true Enable/Disable @import handling
    modules {Boolean\|String\|Object} false Enable/Disable CSS Modules and setup their options
    sourceMap {Boolean} false Enable/Disable Sourcemaps
    importLoaders {Number} 0 Number of loaders applied before CSS loader
    localsConvention {String} asIs Setup style of exported classnames
    onlyLocals {Boolean}

    webpack.config.js

    const path = require('path');
    module.exports = {
      entry: './src/main.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
      },
      module: {
        rules: [
          {
            test: /\.css$/, 
            // 注意:loaders 是 use 的别名,下面的loaders也可以改成use
            loaders: [
              {
                loader: 'style-loader',
                options: {
                  
                }
              },
              {
                loader: 'css-loader',
                // 给每一个 loader 传递参数  
                options: {
                  url: true,
                  import: true
                }
              }
            ]
          }
        ]
      }
    };
    

    源码下载地址

    展开全文
  • 本文主要简单讲解常用loader及plugins的作用,方便快速查找。具体使用方法见官网或github 一、loader同plugins是什么 loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。 ...

    本文主要简单讲解常用loader及plugins的作用,方便快速查找,本文阅读前置条件是需要有webpack基础知识。具体使用方法见文中链接指向的webpack官网、npm或github,或留言给我哦~

    一、loader同plugins是什么
    • loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

    webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,
    因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外,
    还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包,
    在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块,
    注意:loader都是用NodeJS编写的

    loader特点:
    单一原则, 一个loader只做一件事情
    多个loader会按照从右至左, 从下至上的顺序执行

    • 插件(plugin)是 webpack 的支柱功能。用于扩展webpack的功能。当然loader也是变相的扩展了webpack ,但是它只专注于转化文件这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。一个插件就是一个类,可以在打包过程中的特定阶段执行。
      从作用角度简单来讲:loader帮助我们加载文件资源,而plugins则是loader的延伸,并不限制于加载文件资源。丰富了loader的功能。
    二、常用loader
    • file-loader:打包图片,打包字体图标。使用说明

    • url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL(提升网页性能)。使用说明

    • css-loader:和图片一样webpack默认能不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型。解析css文件中的@import依赖关系,打包时会将依赖的代码复制过来代替@import。

    • style-loader: 将css文件通过css-loader处理之后,将处理之后的内容插入到HTML的HEAD代码中。

    • scss-loader:自动将scss转换为CSS

    • less-loader:自动将less转换为CSS

    • PostCSS-loader:PostCSS和sass/less不同, 它不是CSS预处理器(换个格式编写css)。PostCSS是一款使用插件去转换CSS的工具,PostCSS有许多非常好用的插件。例如:autoprefixer(自动补全浏览器前缀)、postcss-pxtorem(自动把px代为转换成rem)。使用说明,必须放在css规则的最后,最先执行。

    • eslint-loader:用于检查常见的 JavaScript 代码错误,也可以进行"代码规范"检查,在企业开发中项目负责人会定制一套 ESLint 规则,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。在编译打包时如果语法有错或者有不符合规范的语法就会报错, 并且会提示相关错误信息。使用说明

    • imports-loader(不推荐使用):1. 自动加载模块功能同 Provide-Plugin,2. 还可修改全局this指向(一般都是使用此功能)。使用说明

    • loader-utils:获取配置文件webpack.config.js文件中option传递的参数。

    • schema-utils:校验配置文件传递的参数。

    三、常用plugins
    • HtmlWebpackPlugin:会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中。使用说明
    默认情况下生成html文件并没有压缩,如果想让html文件压缩可以设置
    new HtmlWebpackPlugin({
        template: "index.html",//配置模板
         minify: {
    			collapseWhitespace: true//压缩
    		}
    })
    
    • clean-webpack-plugin:在打包之前将我们指定的文件夹清空。应用场景每次打包前将目录清空, 然后再存放新打包的内容, 避免新老混淆问题,非官方功能。使用说明
    • copy-webpack-plugin:打包相关的文档。除了JS/CSS/图片/字体图标等需要打包以外, 可能还有一些相关的文档也需要打包(word等)。文档内容是固定不变的, 我们只需要将对应的文件拷贝到打包目录中即可。使用说明。
    • mini-css-extract-plugin:是一个专门用于将打包的CSS内容提取到单独文件的插件。前面我们通过style-loader打包的CSS都是直接插入到head中的。使用说明
    • terser-webpack-plugin:压缩js代码
    • optimize-css-assets-webpack-plugin:压缩css代码
    • image-webpack-loader或img-loader:压缩图片。image-webpack-loader使用说明img-loader使用说明
    • postcss-sprites或webpack-spritesmith:合并图片。postcss-sprites使用说明webpack-spritesmith使用说明
    • webpack-merge:用于优化配置文件。针对不同的环境将不同的配置写到不同的文件中。如:common文件做公共配置项文件,dev文件为开发配置,prod文件为上线配置。在dev,prod文件中配置webpack-merge,使其分别同common文件合并,并暴露给外界。
    • SplitChunksPlugin:Code-Splitting实现的底层就是通过Split-Chunks-Plugin实现的,其作用就是代码分割。
    • Provide-Plugin:功能同imports-loader,自动加载模块,所配置模块(jquery等)可以在全局使用。而不必在html头部引用,或在import导入模块。使用说明
    • IgnorePlugin:用于忽略第三方包指定目录,让指定目录不被打包进去。使用说明
    • add-asset-html-webpack-plugin:将打包好的库引入到html界面上
    • DllPlugin:生成动态库的映射关系,即dll/[name].mainfest.json文件
    • DllReferencePlugin:查找动态库。把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
    • webpack-bundle-analyzer:可视化的打包优化插件。会将打包的结果以图形化界面的方式展示给我们,并且在本地开启服务器,将服务器上生成的界面自动在浏览器中展示出来。使用说明
    • watch:webpack 可以监听打包文件变化,当它们修改后会重新编译打包
    • webpack-dev-server:
      webpack-dev-server和watch一样可以监听文件变化,两者不要同时配置,防止冲突。
      webpack-dev-server可以将我们打包好的程序运行在一个服务器环境下
      webpack-dev-server可以解决企业开发中"开发阶段"的跨域问题
      可以监听css,js代码且能自动刷新
    • HMR(HotModuleReplacementPlugin):热更新插件, 会在内容发生改变的时候,时时的更新(打包)修改的内容但是不会重新刷新网站。推荐使用
    • babel:将ES678高级语法转换为ES5低级语法,否则在低级版本浏览器中我们的程序无法正确执行。使用说明
    • babel-preset-env:告诉webpack我们需要兼容哪些浏览器,然后babel就会根据我们的配置自动调整转换方案, 如果需要兼容的浏览器已经实现了, 就不转换了。
    • babel/polyfill:没有对应关系就是指E5中根本就没有对应的语法, 例如Promise, includes等方法是ES678新增的。ES5中根本就没有对应的实现, 这个时候就需要再增加一些额外配置, 让babel自己帮我们实现对应的语法。
    • babel/parser:将JS代码转换为AST抽象语法树。使用说明
    • abel/generator:将AST抽象语法树转换为JS代码。
    • babel/traverse:遍历抽象语法树。使用说明
    • babel/types:创建AST抽象语法树。使用说明
    • html-withimg-loader:实现HTML中图片的打包(file-loader或者url-loader并不能将HTML中用到的图片打包到指定目录中)。使用说明
    四、其他常用功能/配置
    • sourcemap:用来存储打包之后的文件同打包之前文件的映射关系。使用说明

    使用比较重要,因此描述一下:
    一般企业开发配置:
    开发环境:development: cheap-module-eval-source-map
    只需要行错误信息, 并且包含第三方模块错误信息, 并且不会生成单独sourcemap文件
    生产环境:production: cheap-module-source-map
    只需要行错误信息, 并且包含第三方模块错误信息, 并且会生成单独sourcemap文件
    因为不单独生成sourcemap文件会增加打包文件体积,影响网页性能。单独的sourcemap文件不会被别人请求。

    • tree shaking:过滤掉无用的JS代码和CSS代码, 我们称之为Tree-Shaking。webpack无需插件即可过滤无用js代码:使用说明

      purifycss:过滤无用css文件。下载地址

    • Code-Splitting(代码分隔):默认情况下webpack会将所有引入的模块都打包到一个文件中,代码分隔就是将不经常修改的模块打包到单独的文件中, 避免每次修改用户都需要重新下载所有内容。webpack自有功能。

    • lazy-loading(异步加载):用于提升网页性能。使用说明

    • Prefetching: 空闲的时候加载js文件。使用说明

    • contenthash:长缓存优化。解决浏览器缓存功能造成的修改文件后资源并未重新加载替换原文件的问题。

    • resolve(解析):用于配置导入模块的解析规则。也就是import时简化导入路径(alias属性);修改模块入口查找顺序(mainFields属性)等功能。

    • noParse:默认情况下无论我们导入的模块(库)是否依赖于其它模块(库), 都会去分析它的依赖关系。noParse提前告诉webpack对于一些独立的模块(库), 我们不要去分析它的依赖关系,以提升打包速度。

    • externals:将不会发生变化的第三方模块(库,例如:jquery)设置为外部扩展,避免将这些内容打包到我们的项目中, 从而提升打包速度。使用说明

    • HappyPack:实现多线程打包。使用说明

    • alias:设置模块路径的代替名,方便快读引用模块路径

    • this-callback:提供异步loader返回结果方案。使用说明

    展开全文
  • webpack使用--loader和插件

    千次阅读 2017-03-23 16:54:50
    css-loader 处理css中路径引用等问题 style-loader 动态把样式写入html sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理

    css处理

    • css-loader 处理css中路径引用等问题
    • style-loader 动态把样式写入html
    • sass-loader scss编译器
    • less-loader less编译器
    • postcss-loader css再处理,可以实现css自动补全等功能,但要安装相应的插件和进行相应的配置
    module.exports={
        entry:'./index.js',
        output:{
            path:__dirname+'/dist',
            filename:'bundle.js'
        },
        module:{
            loaders:[
                {
                    test:/\.css$/,
                    loaders:'style-loader!css-loader'
                },
                {
                    test:/\.less$/,
                    loaders:'style-loader!css-loader!less-loader'
                },
                {
                    test:/\.scss$/,
                    loaders:'style-loader!css-loader!sass-loader'
                }
            ]
        }
    }
    

    注意!less-loader加载器里的index.js有一句 var less = require(“less”);
    说明, 你必须要安装less插件。npm install less –save-dev

    js处理

    • babel-loader
    • jsx-loader
    npm install babel-loader babel-core babel-preset-es2015 --save-dev
    
    {
        test:/\.js$/,
        loaders:'babel-loader?presets[]=es2015',
        exclude:/node_modules/
    }

    图片处理

    npm install –save-dev url-loader

    {
        test:/\.(jpg|png)$/,
        loaders:'url-loader?limit=8192'
    }

    自动生成html插件

    html-webpack-plugin,可以在dist/目录下生成index.html文件

    cnpm install html-webpack-plugin --save-dev
    
    
    var htmlwebpackplugin=require('html-webpack-plugin');
    var htmlwebpackplugin=require('html-webpack-plugin');
    module.exports={
        entry:'./index.js',
        output:{
            path:__dirname+'/dist',
            filename:'bundle.js'
        },
        module:{
            loaders:[
            ]
        },
        plugins:[
            new htmlwebpackplugin({
                title:'app',
                filename:'index2.html',
                favicon:'1.png',
                hash:true
            })
        ]
    }

    可以进行配置:
    title: 设置title的名字
    filename: 设置这个html的文件名
    template:要使用的模块的路径
    inject: 把模板注入到哪个标签后
    favicon: 给html添加一个favicon

    提取样式插件

    extract-text-webpack-plugin,把css提取到一个文件中

    npm install --save-dev extract-text-webpack-plugin
    
    var plugin=require('extract-text-webpack-plugin');
    module:{
            loaders:[
                {
                    test:/\.css$/,
                    loaders:plugin.extract({fallback:'style-loader',use:'css-loader'})
                }
            ]
        },
        plugins:[
            new plugin('1.css'),
        ]

    自动补全css3前缀插件

    cnpm install –save-dev autoprefixer postcss-loader
    autoprefixer是postcss-loader的插件之一。

    {
    test:/\.css$/,
    loaders:["style-loader", "css-loader","postcss-loader"]
    }

    同级目录新建postcss.config.js

    module.exports = {
      plugins: [
        require('autoprefixer')({browsers:'last 5 version'})
      ]
    }

    webpack提供了很多有用的原生插件。
    UglifyJsPlugin解析/压缩/美化所有的js chunk。通过设置except数组来防止指定变量被改变。

    new webpack.optimize.UglifyJsPlugin({
        mangle: {
            except: ['$super', '$', 'exports', 'require']
        }
    })

    使用jquery

    ProvidePlugin,定义标识符,当遇到指定标识符的时候,自动加载模块。

    npm install --save-dev jquery
    
    var webpack=require('webpack');
    //引入本地jquery,配置别名,用webpack.ProvidePlugin将jquery在全局引入。这样就不用每个文件都require(jquery)
    resolve: { alias: { jquery: "./jquery-3.2.0.min.js" } }, 
    plugins:[
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]

    注意:$只在js模块中可以用,在html文件中没有引入jquery,不能用。

    webpack-dev-server和webpack-dev-middleware

    webpack-dev-server:
    它是一个静态资源服务器,只用于开发环境;是一个小型Express服务器,webpack-dev-server会把编译后的静态文件全部保存在内存里;

    webpack-dev-middleware:
    是一个处理静态资源的middleware;

    webpack-hot-middleware:
    是一个结合webpack-dev-middleware使用的middleware,它可以实现浏览器的无刷新更新(hot reload),这也是webpack文档里常说的HMR(Hot Module Replacement)。

    webpack-dev-server就是一个Express 和 webpack-dev-middleware的实现,两者之间的区别是webpack-dev-server 是封装好了的, 除了config 和命令行参数之外很难再做定制型的开发,所以它适合纯前端的辅助工具。而webpack-dev-middleware是一个中间件, 可以编写自己的后端服务, 然后整合进来.

    #

    待续

    展开全文
  • Webpack4 自定义 Loader

    2019-09-12 16:10:55
    1.Loader Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译。 以下面处理 CSS 文件为例: CSS 源代码会先交给 css-loader 处理,找出 CSS 中依赖的资源、...
  • webpack4 - loader 的执行过程和部分常用loader原理实现 1.loader 运行的总体流程 1.Compiler.js中会将用户配置与默认配置合并,其中就包括了loader部分 2.webpack就会根据配置创建两个关键的对象 ———— ...
  • Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将...
  • webpack常用loader和plugin总结loaderstyle-loader & css-loaderless-loaderpostcss-loaderfile-loader & url-loaderbabel-loader & @babel/preset-env & @babel/corebabel-polyfillpluginhtml-...
  • Webpack4 配置JS Loader

    千次阅读 2019-07-19 12:57:27
    虽然目前部分浏览器和 Node.js 已经支持 ES6,但由于它们对 ES6 所有的标准支持不全,这导致在开发中不敢全面地使用 ES6。 通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码,这包含2件事: 把...
  • 今天遇到一个坑,解决了,发个博客,希望和我遇到相同问题的同学不要卡很久。 我目前写的项目中用到了一个第三方功能的sdk,当然我们会在测试服务器来测试我们接入这个sdk有没有问题,没有问题再部署正式服务器。...
  • 前面写了webpack打包js文件的方法,但打包图片资源又会用到什么的方法呢?本文就这个问题进行探讨学习。 本文的目的是使用webpack打包图片资源,并能够使打包后的图片显示在浏览器上。 初始化目录 首先,备好...
  • Webpack4 配置 scss Loader

    2019-07-17 11:08:23
    1.配置 scss Loader SCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器,语法和 CSS 相似,但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS,区别在于 SASS 语法类似 Ruby,而 SCSS 语法类似 CSS,对于...
  • webpack loader

    2019-06-20 16:09:59
    loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言...
  • 其实说到性能优化,他的范围太广了,今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。 简单说下工作中遇到的问题吧,我们做的一个项目中首页用了十多...webpack中有一个包叫做url-loader,他可以将ht...
  • loader原理 概念 loader就像一个翻译员,能将源文件翻译后输出新的结果,并且一个文件可以链式的经过几个翻译员。 以.scss文件为例子: 先将.scss文件内容交给sass-loader翻译为css 在将翻译后的css交给css-...
  • webpack loader从入门到精通全解析

    千次阅读 2019-07-19 10:39:51
    webpack loader从入门到精通 Loader 就像是一个转换器,可以把源文件经过转化后输出新的一个结果,并且一个文件还可以链式的经过多个转换器转换。 以转换处理 SCSS 文件为例子: SCSS 源代码会先移交给 sass-...
  • Webpack4 配置TS Loader

    千次阅读 2019-07-19 16:02:10
    TypeScript 是 JavaScript 的一个超集,主要提供了类型检查系统和对 ES6 语法的支持,但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码,必须通过构建把它转换成 JavaScript 代码后才能运行。...
  • 本文首发在 掘金 关于 前两天在使用webpack搭建移动端web的时候,需要使用到flexible.js动态修改html的font-size。考虑到只有几行代码,我想把flexible.js镶嵌到&amp;...什么是webpack loader...
  • webpack加载本地css

    千次阅读 2017-04-14 07:50:18
    大家在使用vue过程中,会逐渐接触到webpack,他是一个打包和编译工具,同时很多人会用到vue-cli这个脚手架。在使用的过程中,你会通过css-loader来加载css文件,这个这么用网上有很多。但是在使用这个的时候还是有些...
  • webpack之file-loader和url-loader的区别

    千次阅读 2018-08-25 21:31:57
    前言 区别 配置 打包 总结 ...url-loader可以将图片转为base64字符串,能更快的加载图片,一旦图片过大,就需要使用file-loader的加载本地图片,故url-loader可以设置图片超过多少字节时,使用file-...
1 2 3 4 5 ... 20
收藏数 10,407
精华内容 4,162
关键字:

webpack 使用本地loader